AngularJS - add active class to itself after click

Question

Is there a simple declarative way (without a additional function in the $scope) to marked clicked element with AngularJS?

e.g. I have a button which I want to marked as clicked/checked.

<button ng-model="form.btn" ng-click=" // do stuff here to add a class or attr ">Go</button>

I was able to achieve this with external function but I am looking for a declarative way / all in HTML template.

Answer 1

If you want toggle class use this: http://jsbin.com/vimero/1/edit

<button ng-model="btn" ng-click="btn =! btn" ng-class="{'active' : btn}"> 
 Toogle 
</button>

Answer 2

<button ng-model="form.btn" ng-click="form.btn = true" 
ng-class="{'active' : form.btn}">
    Go
</button>

Answer 3

ng-click="yourFunction($event.target)"

And do your transformations in yourFunction. You'll have HTMLElement passed as 1st param.

Answer 4

I found this works pretty well for a group of buttons to toggle active ng-class if the condition set in ng-click is met:

<button ng-class="{'active' : activeButton == 'firstButton'} ng-click="activeButton = 'firstButton'>
  First Button
</button>
<button ng-class="{'active' : activeButton == 'secondButton'} ng-click="activeButton = 'secondButton'>
  Second Button
</button>
<button ng-class="{'active' : activeButton == 'thirdButton'} ng-click="activeButton = 'thirdButton'>
  Third Button
</button>