AngularJS - 3-button group acting as radio buttons

Using the Ionic framework, I'm trying to create a group of three buttons that act as radio buttons:

button-group picture

If I click on Breakfast, I would like Lunch and Dinner to return to their normal (white) state, and Breakfast to turn Blue.

With my current code, I can't get this functionality to work, although I can get the buttons to switch color, slightly randomly (perhaps I just don't understand the ng-class directive).

Here is my HTML code:

<div class="bar bar-subheader">
 <div class="button-bar">
   <a class="button" ng-class="{'button-positive' : !isActiveB, 'none': isActiveB}" ng-click="active('breakfast')">Breakfast</a>
   <a class="button" ng-class="{'button-positive' : !isActiveL, 'none': isActiveL}" ng-click="active('lunch')">Lunch</a>
   <a class="button" ng-class="{'button-positive' : !isActiveD, 'none': isActiveD}" ng-click="active('dinner')">Dinner</a>
 </div>
</div>

My JS:

$scope.active = function(meal) {

 switch (meal) {
   case 'breakfast':
     $scope.$broadcast('slideBox.setSlide', 0);
     $scope.isActiveB = $scope.isActiveB;
     $scope.isActiveL = !$scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'lunch':
     $scope.$broadcast('slideBox.setSlide', 1);
     $scope.isActiveB = !$scope.isActiveB;
     $scope.isActiveL = $scope.isActiveL;
     $scope.isActiveD = !$scope.isActiveD;
     break;
   case 'dinner':
     $scope.$broadcast('slideBox.setSlide', 2);
     $scope.isActiveB = !$scope.isActiveB;
     $scope.isActiveL = !$scope.isActiveL;
     $scope.isActiveD = $scope.isActiveD;
     break;
 }
};

I can put the code in JSFidle if you require more information and a working solution.

Thanks for your help.

NOTE: I would like to maintain my active() function, and use the ng-class directive if possible, as I have a lot of other code dependent on this function.

Maybe this simplified example will help you a little:

<div class="button-bar">
    <a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
    <a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
    <a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
</div>

Controller:

$scope.active = 'breakfast';

$scope.setActive = function(type) {
    $scope.active = type;
};

$scope.isActive = function(type) {
    return type === $scope.active;
};

Demo: http://plnkr.co/edit/9HmuTStz70x5KoAvLaP4?p=preview

Here is a more flexible solution for future Googlers.

Working plunker: http://plnkr.co/edit/U2Hvx4?p=preview

.directive('barSelect',function($parse){
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      model: '=ngModel',
      value: '=barSelect'
    },
    link: function(scope, element, attrs, ngModelCtrl){
      element.addClass('button');
      element.on('click', function(e){
        scope.$apply(function(){
          ngModelCtrl.$setViewValue(scope.value);
        });
      });

      scope.$watch('model', function(newVal){
        element.removeClass('active');
        if (newVal === scope.value){
          element.addClass('active');
        }
      });
    }
  };
});

And a usage example:

   <div class="button-bar">
     <a bar-select="button.value"
        ng-repeat="button in clientSideList"
        ng-model="data.clientSide"
     >{{button.text}}</a>
   </div>