AngularJS - How can I $watch a deeply nested array?

Question

I currently have data that looks like the following:

$scope.boardLists = [{
cards: [{a:1, b:2}, {a:2, b:2}]
},

{
cards: [{a:3, b:3}, {a:4, b:4}]
},

{
cards         


        

Answer 1

Scope $watch Depths

$scope.$watch('boardLists', function(newVal, oldVal){
  console.log(newVal);
  console.log(oldVal);
}, true);

Use $scope.$watch('item',fn,true); for a deep watch.

For information, see AngularJS Developer Guide - $scope Watch Depths.

Answer 2

$watch is a bit expensive, you can try to use $apply

$scope.$apply(function() {
  // do something with the scope
  $scope.boardList.push({cards:...});
});

$apply will automatically rerun your templates