$watchGroup vs $watchCollection?

Question

There're 2 ways to watch a group of variables in Angular. But what's the difference between them?

They both seem to do shallow watches. Are there situations where one is obviously preferable over the other?

Answer 1

$watchCollection will shallow watch the properties on a single object and notify you if one of them changes.

$watchGroup however watches a group of individual watch expressions.

They are not functionally equivalent. $watchGroup could be used when you want to watch a multitude of expressions that should all respond to the same callback - these could be individual expressions that target different objects. This could be used for watching 'foo', 'foo.bar', and 'baz.qux'. These are 3 different targets - foo, foo's bar property and baz's qux property, but they will all delegate to the same handler.

By contrast, $watchCollection will only shallow watch a single object. This makes it better for an object that might change it's properties a lot (for example - our very own $scope). In keeping with our rubbish name examples, to achieve the same as above you would only want to watch foo and baz, but you would be notified of any changes in foo and baz (as opposed to just being notified for the changes on foo itself, foo.bar and baz.qux.

Answer 2

Here's an example of where you'd use each one.

$scope.data = ['Abc', 'Bcd', 'Cde', 'Def'];
$scope.$watchCollection('data', function(){...});
// responds to changes within $scope.data
// The following line will trigger the watch function:
$scope.data[0] = 'FOO';

-

$scope.data = ['Abc', 'Bcd', 'Cde', 'Def'];
$scope.$watchGroup('data', function(){...});
// responds to changes on the properties (or functions, etc.)
// Any angular expression can be used in $scope.data
// The following line will trigger the watch function:
$scope.Abc = 'FOO';