$watch not being triggered on array change

Question

I'm trying to figure out why my $watch isn't being triggered. This is a snippet from the relevant controller:

$scope.$watch('tasks', function (newValue, oldValue) {
    //do some stuff
    //only enters here once
    //newValue and oldValue are equal at that point
});

$scope.tasks = tasksService.tasks();

$scope.addTask = function (taskCreationString) {
    tasksService.addTask(taskCreationString);//modifies tasks array
};

On my view, tasks is clearly being updated correctly as I have its length bound like so:

<span>There are {{tasks.length}} total tasks</span>

What am I missing?

Answer 1

Try $watch('tasks.length', ...) or $watch('tasks', function(...) { ... }, true).

By default, $watch does not check for object equality, but just for reference. So, $watch('tasks', ...) will always simply return the same array reference, which isn't changing.

Update: Angular v1.1.4 adds a $watchCollection() method to handle this case:

Shallow watches the properties of an object and fires whenever any of the properties change (for arrays this implies watching the array items, for object maps this implies watching the properties). If a change is detected the listener callback is fired.