Get the ID of clicked button only in Angular Js

Question

In the snippet bellow, if you click one of the buttons, then all three buttons will re-act and rotate with the clicked one.

How can I rotate only the clicked one? I tried to pass unique id of each button to rotate() function, but all what I tried have failed.

And if there is one rotated (active) button, how can I make sure that the others are not rotated (not active)?

angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){ 
   $scope.isActive = false;
        $scope.rotate = function () {
            $scope.isActive = !$scope.isActive;
        };
})

.rotate,
    .rotateCounterwise {
        -webkit-transition: 300ms ease all;
        -moz-transition: 300ms ease all;
        -o-transition: 300ms ease all;
        transition: 300ms ease all;
    }
    .rotate {
        -webkit-transform: rotate(-90deg);
    }
    .rotateCounterwise {
        -webkit-transform: rotate(0deg);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="main">
  <button  ng-click="rotate()"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="rotate()"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="rotate()"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
           Click
  </button>
</div>

Answer 1

Alternate way to define three different flags

angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){ 
   $scope.isActive = false;
})

.rotate,
    .rotateCounterwise {
        -webkit-transition: 300ms ease all;
        -moz-transition: 300ms ease all;
        -o-transition: 300ms ease all;
        transition: 300ms ease all;
    }
    .rotate {
        -webkit-transform: rotate(-90deg);
    }
    .rotateCounterwise {
        -webkit-transform: rotate(0deg);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script>

<div ng-app="myApp" ng-controller="main">
  <button  ng-click="isActive=!isActive;isActive1=false; isActive2=false; "
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="isActive1=!isActive1; isActive=false;isActive2=false;"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive1]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
                Click
  </button>
  <button  ng-click="isActive2=!isActive2; isActive=false;isActive1=false;"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isActive2]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
           Click
  </button>
</div>

Answer 2

Instead of hard coding each button element you can define a list of button objects in your controller, where each object has a isActive flag. You can then use ng-repeat to create each of the button elements.

Example

$scope.buttons = [
 {
   text: 'Click',
   isActive: false
 },
 {
   text: 'Click2',
   isActive: false
 },
 {
   text: 'Click3',
   isActive: false
 }
]

Now each button can be identified by an index in the array and passed into the $scope.rotate function.

<button 
   ng-repeat="button in buttons track by $index"
   ng-click="rotate($index)"
   ...
</button>

And then you can update the $scope.rotate function to toggle the isActive flag to the button object by using the passed in index parameter.

$scope.rotate = function (index) {
   $scope.buttons[index].isActive = !$scope.buttons[index].isActive;
};

To toggle the actual css class you use the button.isActive field like so:

<button
   ...
   ng-class="{true: 'rotate', false: 'rotateCounterwise'}[button.isActive]"
</button>

Updated your snippet, but here's a jsbin example too: http://jsbin.com/vajolokifa/edit?html,css,js,output

angular.module("myApp", ["ngAnimate"])
.controller("main", function($scope){
  
   $scope.buttons = [
     {
       text: 'Click',
       isActive: false
     },
     {
       text: 'Click2',
       isActive: false
     },
     {
       text: 'Click3',
       isActive: false
     }
   ];
   
   $scope.rotate = function (index) {
      $scope.buttons[index].isActive = !$scope.buttons[index].isActive;
   };
})

.rotate,
    .rotateCounterwise {
        -webkit-transition: 300ms ease all;
        -moz-transition: 300ms ease all;
        -o-transition: 300ms ease all;
        transition: 300ms ease all;
    }
    .rotate {
        -webkit-transform: rotate(-90deg);
    }
    .rotateCounterwise {
        -webkit-transform: rotate(0deg);
    }

<div ng-app="myApp" ng-controller="main">
  
  <button  ng-repeat="button in buttons track by $index"
           ng-click="rotate($index)"
           ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}"
           ng-class="{true: 'rotate', false: 'rotateCounterwise'}[button.isActive]"
           style="cursor:pointer; border: 2px solid; border-radius: 17%;">
           {{button.text}}
  </button>
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
</div>