Angular bootstrap change button colors on click - angularjs

Question

I have the following
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
When we click on the + sign, it gives me a panel with 2 buttons. These buttons are set to default. But i want to have a function that sets the button to primary whenever clicked(active), and go back to default when it is unclicked or another button is clicked.
How do i achieve this functionality?

Answer 1

Just use ng-class, along with the variables you are already setting to toggle display:
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>
Here is a working demo: http://plnkr.co/edit/cAqxxmaS7pjfhfSgCsWL?p=preview
Note: I took a shot at consolidating some of the logic in the showMoreFunc function. I think this works, but your original code worked perfectly well with ng-class:
$scope.showMoreFunc = function(view) {
$scope.display.appliedsciences = (view == "appliedsciences" && !$scope.display.appliedsciences);
$scope.display.academic = (view == "academic" && !$scope.display.academic);
}

Answer 2

Using the Buttons (Radio) from http://angular-ui.github.io/bootstrap/ :
Change
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="academic">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="appliedsciences">Applied Sciences</button>
to
<button type="button" class="btn btn-default" ng-click="showMoreFunc('academic')" ng-model="radioModel" btn-radio="'Left'">Academic</button>
<button type="button" class="btn btn-default" ng-click="showMoreFunc('appliedsciences')" ng-model="radioModel" btn-radio="'Right'">Applied Sciences</button>
and in your controller add
$scope.radioModel = 'Left';
Result, if btn Academic is 'active'
and this if btn Applied Sciences is 'active'

Answer 3

I think best way is using pure css to deal with this.
.btn:focus{
outline: 0 !important;
}
.btn:active {
outline:0;
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
I wrote a simple plnkr demo with bootstrap 3.1, when you clicking default button, It will change to primary color.
checkout http://plnkr.co/edit/KJR8xL?p=preview

Answer 4

This will work
<button type="button" ng-class="{'btn-primary': display.academic}" ng-click="showMoreFunc('academic')" >Academic</button>
<button type="button" ng-class="{'btn-primary': display.appliedsciences}" ng-click="showMoreFunc('appliedsciences')" >Applied Sciences</button>