Freewind Freewind - 11 months ago 51
AngularJS Question

How to deep watch an array in angularjs?

There is an array of objects in my scope, I want to watch all the values of each object.

This is my code:

function TodoCtrl($scope) {
$scope.columns = [
{ field:'title', displayName: 'TITLE'},
{ field: 'content', displayName: 'CONTENT' }
$scope.$watch('columns', function(newVal) {
alert('columns changed');

But when I modify the values, e.g. I change
, the
alert('columns changed')
never popped.

How to deep watch the objects inside an array?

There is a live demo:

Answer Source

You can set the 3rd argument of $watch to true:

scope.$watch('data', function (newVal, oldVal) { /*...*/ }, true);


Since Angular 1.1.x you can also use $watchCollection to watch shallow watch (just the "first level" of) the collection.

scope.$watchCollection('data', function (newVal, oldVal) { /*...*/ });