Angular-UI & Bootstrap: change class based on class

Question

I am using Angular-UI and Bootstrap 3.

I have this HTML connected to a scope (assume the scope has a $scope.myBtn = "A", say).

<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="A">A</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="B">B</button>
<button type="button" class="btn btn-primary" ng-model="myBtn" btn-radio="C">C</button>

This produces three blue buttons, which is what I want. When one of the buttons is clicked, the $scope.myBtn value gets set to the right value (say, "B") and that button's class gets set to:

<button type="button"
  class="btn btn-primary active" ng-model="myBtn" btn-radio="B">B</button>

(notice the addition of active in the class).

When one button is active I want to remove the "btn-primary" class and add the "btn-success" class. I know I could do it this way (and it is what I am actually using now):

<button
  type      = "button"
  class     = "btn"
  ng-class  = "{
    'btn-primary': myBtn != 'B',
    'btn-success': myBtn == 'B'
  }"
  ng-model  = "myBtn"
  btn-radio = "'B'">B</button>

But that seems brutally verbose for every button... Is there some better way to do this?

Answer 1

You can use a directive to conditionally set the class by observing the model value

app.directive('myClass', function () {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe('ngModel', function (item) {
                if (scope.myBtn !== 'B') {
                    attrs.$set('class', "btn-primary");
                } else {
                    attrs.$set('class', "btn-success");
                }
            });
        }
    }
});

Working Demo