Angular-UI & Bootstrap: change class based on class - angularjs

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