angularjs - Conditionally apply CSS to grouped button bar -

what best way conditionally apply css grouped button-bar in angularjs?

so far i've tried following doesn't seem working:

    <div class="item item-divider">         rating     </div>     <div class="button-bar">         <a class="button button-clear" ng-class="{ 'energized': isbuttonclicked }" ng-click="isbuttonclicked = !isbuttonclicked">1</a>         <a class="button button-clear" ng-class="{ 'energized': isbuttonclicked }" ng-click="isbuttonclicked = !isbuttonclicked">2</a>         <a class="button button-clear" ng-class="{ 'energized': isbuttonclicked }" ng-click="isbuttonclicked = !isbuttonclicked">3</a>         <a class="button button-clear" ng-class="{ 'energized': isbuttonclicked }" ng-click="isbuttonclicked = !isbuttonclicked">4</a>         <a class="button button-clear" ng-class="{ 'energized': isbuttonclicked }" ng-click="isbuttonclicked = !isbuttonclicked">5</a>     </div>   

the code above produces this, working on rating system, , want 1 number light @ time.

given using $scope in controller, this:

$scope.setrate = function (value) {     $scope.rate = value; } 

...and view use this:

<div class="button-bar">     <a class="button button-clear" ng-class="{ 'energized': rate == 1 }" ng-click="setrate(1)">1</a>     <a class="button button-clear" ng-class="{ 'energized': rate == 2 }" ng-click="setrate(2)">2</a>     <a class="button button-clear" ng-class="{ 'energized': rate == 3 }" ng-click="setrate(3)">3</a>     <a class="button button-clear" ng-class="{ 'energized': rate == 4 }" ng-click="setrate(4)">4</a>     <a class="button button-clear" ng-class="{ 'energized': rate == 5 }" ng-click="setrate(5)">5</a> </div>   

and come think of it, use ng-repeat this... :-)

https://jsfiddle.net/3f3tc46w/4/