Angular animate on change

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.1/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <table class="table table-condensed">
			<tr>
              <th>
                #
              </th>
              <th>
                Coke 
              </th>
              <th>
                Meat 
              </th>
              <th>
                Beer 
              </th>
          </tr>
          <tr ng-repeat="d in dataSource">
            <td>
              {{d.name}}
            </td>
            <td>
              <i class="glyphicon glyphicon-arrow-up" ng-model="d" ng-click="IncrementCounter(d,0,$event)" ng-hide="d.name == 'Average'">
              </i>
                <span animate-on-change='d.data[0]'>{{d.data[0] | number}}</span>   
              <i class="glyphicon glyphicon-arrow-down" ng-model="d.data[0]" ng-click="DecrementCounter(d,0)" ng-hide="d.name == 'Average'">
              </i>
            </td>
            <td>
              <i class="glyphicon glyphicon-arrow-up" ng-model="d" ng-click="IncrementCounter(d,1)" ng-hide="d.name == 'Average'">
              </i>
              <span animate-on-change='d.data[1]'>{{d.data[1] | number}}</span>
              <i class="glyphicon glyphicon-arrow-down" ng-model="d.data[0]" ng-click="DecrementCounter(d,1)" ng-hide="d.name == 'Average'">
              </i>
            </td>
            <td>
              <i class="glyphicon glyphicon-arrow-up" ng-model="d" ng-click="IncrementCounter(d,2)" ng-hide="d.name == 'Average'">
              </i>
              <span animate-on-change='d.data[2]'>{{d.data[2] | number}}</span>
              <i class="glyphicon glyphicon-arrow-down" ng-model="d.data[2]" ng-click="DecrementCounter(d,2)" ng-hide="d.name == 'Average'">
              </i>
            </td>
          </tr>
      </table>
    </div>
</div>

CSS

[animate-on-change] {
  transition: all 1s;
  -webkit-transition: all 1s;
}
[animate-on-change].changed {
    background-color: red;
    transition: none;
    -webkit-transition: none;
}
.blink_me {
  animation: blinker 500ms linear infinite;
}    
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

JavaScript

angular.module('myApp', [])
    .controller('AppCtrl', function ($scope) {
    $scope.dataSource= [
        {"name": "Upmarket", "data": [3, 5, 5], type: "column", "tooltip" : "", "color" : '#A31A7E'},
        {"name": "Mid-Market", "data": [3, 3, 3], type: "column", "tooltip" : "", "color" : '#B19B00'},
		{"name": "Less-Afluent", "data": [2, 2, 1], type: "column", "tooltip" : "", "color" : '#E17000'}
    ];
        
    //average calculate
    var avgData = {
					"name": "Average", 
					"data": [
								($scope.dataSource[0].data[0] + $scope.dataSource[1].data[0] + $scope.dataSource[2].data[0])/3, 
								($scope.dataSource[0].data[1] + $scope.dataSource[1].data[1] + $scope.dataSource[2].data[1])/3, 
								($scope.dataSource[0].data[2] + $scope.dataSource[1].data[2] + $scope.dataSource[2].data[2])/3
							], 
					"type": "spline", 
					"tooltip" : "", 
					"color" : '#009B74'
				  };
	
	
	$scope.dataSource.push(avgData);
        
    $scope.IncrementCounter = function(d, i){        
		d.data[i] = d.data[i] + 1;
		$scope.dataSource[3].data[i] += 1/3;
		
	}

	
	$scope.DecrementCounter = function(d, i){
		d.data[i] = d.data[i] - 1;
		$scope.dataSource[3].data[i] -= 1/3;
		
	}
}).directive('animateOnChange', function($timeout) {
    return function(scope, element, attr) {
        scope.$watch(attr.animateOnChange, function(nv,ov) {
        console.log(nv + "/" + ov);
            if (nv!=ov) {
                element.addClass('blink_me');
                $timeout(function() {
                    element.removeClass('blink_me');
                }, 500);
            }
        });
    };  
});