Change button color after click in Angularjs

Answer 1

The probably best way is to bind the button style to the variable like this:

<button class="button button-block {{buttonStyle}}" ng-click="start()">
    {{buttonText}}
</button>

and define buttonStyle and buttonText in your scope

$scope.buttonText = "Start";
$scope.buttonStyle="button-calm";

$scope.start = function(){
    $scope.buttonText = "Clicked!";
    $scope.buttonStyle="button-assertive";
}

Answer 2

you can use ng-class Define a var like $scope.started = false; and inside you start function set it to true. On your button do this:

ng-class="{'btn-warning': started, 'btn-danger': !started}"

another way to write it:

ng-class="started && 'btn-warning' || !started && 'btn-danger'"

note: remove btn-danger from your curre class attribute

EDIT

The newer, more common way is the standard ternary operator (also easier to read):

ng-class="started ? 'btn-warning' : 'btn-danger'"

Answer 3

This can be done using directive easily. You can have a look at this. https://www.youtube.com/watch?v=sYexGR7FQX0