"Targeted" deep watch in AngularJS - angularjs

Question

Suppose I have an array of objects like this:
$scope.data = [
{
"active": true,
"id": "4bcb19db-ec10-4de5-8ae6-b13388494651",
"name": "Owais Shah",
"username": "chekhov"
},
{
"active": false,
"id": "630d0582-1bf9-4331-9fa6-f6baa59319b2",
"name": "Tim Hunt",
"username": "one"
}
]
I can use this to deep watch the object:
$scope.$watch('data', function(){...}, true)
However, this is not efficient in my case, as the only property of these objects that I'm interest in watching is active.
Is there a way to watch only a specific property deep inside the object? Something like $scope.$watch('data[].active' ...)

Answer 1

I think you could do something like this:
for(var i=0,j=$scope.data.length;i<j;i++) {
$scope.$watch(data[i].active, function() { });
}

Answer 2

You can watch on a function which in turn returns your inner objects
$scope.$watch( function() {
return $scope.data.active[0];
},
function(newValue, oldValue) {
console.log('It changed!');
}
);

Answer 3

You can take advantage of the $watch function accepting a function and return a value you compute from the array. For example, you could look at it is a number based on the binary sequence of 0/1 for active = false or true. Something like this would work:
$scope.$watch(function() {
var value = 0, idx;
for (idx = 0; idx < $scope.data.length; idx += 1) {
value *= 2;
value += $scope.data[idx].active ? 1 : 0;
};
return value;
}, function() {
$scope.changes += 1;
$scope.status = "Changed " + $scope.changes + " times."; });
The jsFiddle here illustrates it: http://jsfiddle.net/jeremylikness/GrRtK/
You can see it illustrated by clicking the same button. The first time the element changes from true to false or vice versa, the change is registered, while subsequent updates do not trigger the watch. It will be even more readable if you use a mapping function from underscore to project the array onto your number or value to watch.