Angular | Remove active class on button

Question

I'm making an AngularJS project using Bootstrap.

Here's the JSfiddle: https://jsfiddle.net/mijacat/dmuuu79v/3/

I'd like to be able to toggle the button to have it instantly change back and forth from .btn btn-default to .btn btn-info . However, usually the button is 'active', then it changes state on a second click.

How can I do this in one click? Is there a solution using Angular if possible? This is because I'm hoping to change the button state to something different later.

Answer 1

Just use ng-class :

<button class="btn" ng-class="{'btn-info': some_condition}">...</button>

Here's an updated JSFiddle (also note the usage of $index variable): https://jsfiddle.net/dmuuu79v/4/

Answer 2

The problem you have is that you have a one variable $scope.isToggled to keep the state of all buttons. You should keep it separate.

I have corrected your fiddle: https://jsfiddle.net/dmuuu79v/5/