How to deep watch an array in angularjs?

Question

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 TITLE to TITLE2, the alert('columns changed') never popped.

How to deep watch the objects inside an array? 

Answer 1

Do deep watch an array in angularjs you can set the 3rd argument of $watch to true:-

Are you interested in learning Angularjs from the basics! Here's the right video for you on Angularjs provided by Intellipaat:

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