AngularJS - Binding only changed model properties with animation - angularjs

Question

I have an app that polls the server for a list of items and displays the results. Example fiddle here.
I would like some custom animation when the model changes but only for the properties that have changed value i.e. Item2 in the example.
I'm replacing the entire items collection in the controller each time it polls, how do I update the current list with only those values that have changed? Do I need to loop through and compare or is there a nicer way?
Is the example the best way to fire every time the bound value within the span changes value?
HTML:
<div ng-app="myApp">
<div ng-controller='ItemCtrl'>
<div ng-repeat="item in items">
<div>{{item.Name}}</div>
<div><span>Item1: </span><span animate ng-model="item.Item1"></span></div>
<div><span>Item2: </span><span animate ng-model="item.Item2"></span></div>
<div><br>
</div>
</div>
JS:
var myApp = angular.module('myApp', []);
myApp.controller("ItemCtrl",
['$scope', '$timeout', 'getItems1', 'getItems2',
function ($scope, $timeout, getItems1, getItems2) {
$scope.items = [];
var change = false;
(function tick() {
bindItems();
$timeout(tick, 2000);
})();
function bindItems() {
if (change) {
$scope.items = getItems2;
}
else if (!change){
$scope.items = getItems1;
}
change = !change;
}
}]);
myApp.factory('getItems1', function() {
return [
{
Name: 'foo1',
Item1: 1,
Item2: 2
},
{
Name: 'foo2',
Item1: 3,
Item2: 4
},
];
});
myApp.factory('getItems2', function() {
return [
{
Name: 'foo1',
Item1: 1,
Item2: 6
},
{
Name: 'foo2',
Item1: 3,
Item2: 8
},
];
});
myApp.directive('animate', function(){
// Some custom animation when the item within this span changes
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModel) {
scope.$watch(function() {
return ngModel.$modelValue;
}, function (newValue, oldValue, other) {
var $elem = $(elem);
console.log(newValue + ' ' + oldValue + ' ' + other);
// I don't want to animate if the values are the same, but here
// oldValue and newValue are the same, because I'm replacing the
// entire items list??
//if (newValue === oldValue)
//{
// $elem.html(newValue);
//} else
{
// oldValue same as newValue, because I'm replacing the entire items
// list??
$elem.html(oldValue);
$elem.slideUp(1000, function() {
$elem.html(newValue);
}).slideDown(1000);
}
});
}
};
})
UPDATE:
Got this working by looping through the list and updating properties individually. jsfiddle
Though feel there should be a better way where a) no need to loop through properties, b) can hook into before and after events on the watch, so no need to set the value using .html()