NG-ANIMATE

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>
<script src="http://code.angularjs.org/1.2.1/angular-animate.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 ng-class="{ 'animate-class' : foo }">
              {{d.name}}
            </td>
            <td>
              <i class="glyphicon glyphicon-arrow-up" ng-model="d" ng-click="IncrementCounter(d,0,$event)" ng-hide="d.name == 'Average'" ng-animate=" 'animate' ">
              </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]"...

CSS

.change {
    color: red;
}
.change-add,.change-remove {
  color: white;
  transition: all 1s;
  -webkit-transition: all 1s linear;
}
.change-add-active {
  color: red;
}
.change-remove {
    color: red;

}
.change-remove-active {
  color: white;
}

.change-up {
    color: green;
}
.change-up-add,.change-up-remove {
  color: white;
  transition: all 1s;
  -webkit-transition: all 1s ease-in;
}
.change-up-add-active {
  color: green;
}
.change-up-remove {
    color: green;

}
.change-up-remove-active {
  color: white;
}

JavaScript

angular.module('myApp', ['ngAnimate'])
    .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($animate) {
  return function(scope, elem, attr) {
      scope.$watch(attr.animateOnChange, function(nv,ov) {
        if (nv!=ov) {
          var c = nv > ov?'change-up':'change';
          $animate.addClass(elem,c, function() {
            $animate.removeClass(elem,c);
          });
        }
      })  
  }  
});