Famous Angular animation

Question

In the below famous angular code, the animation works at the first click, but not at the second click or thereafter. What code is missing that will make this work at every click?

Thanks!

Js

$scope.animate = function(index) {
        $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
    };

HTML

<fa-grid-layout fa-options="myGridLayoutOptions">
    <fa-modifier ng-repeat="item in list"
                 fa-origin="[0.5, 0.5]"
                 fa-align="[0.5, 0.5]"
                 fa-rotate-z="item.rotate.get()">
      <fa-surface fa-background-color="item.bgColor" fa-click="animate($index)">
        {{item.content}}
      </fa-surface>
    </fa-modifier>
  </fa-grid-layout>             

Answer 1

Since you already Transitioned to (Math.PI * 4), that is now the current state of the rotation so there is nowhere to Transition to. Transitionables do not accumulate, in other words. Reset the Transitionable back to the original state, then Transition again.

$scope.animate = function(index) {
    $scope.list[index].rotate.set(0);
    $scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
};