In a button group, one button is designated as "active" by the ng-class attribute (either myCtrl.onactive or myCtrl.offactive)
<div class="btn-group pull-right">
<button ng-class="{active: myCtrl.onactive}" class="btn" ng-click="myCtrl.changeColorIcons()">on</button>
<button ng-class="{active: myCtrl.offactive}" class="btn" ng-click="myCtrl.changeColorIcons()">off</button>
</div>
The goal is to have only the clicked button display the active class
Currently attempting this in the controller with the following code:
self.onactive = true; //by default, the "on" button is active
//switch active state when a button is clicked
this.changeColorIcons = function() {
if (self.onactive) {
self.offactive = true;
self.onactive = false;
} else {
self.onactive = true;
self.offactive = false;
}
};