How do I detect a change in a multi-dimension array in AngularJS

Question

If I have the following data structure:

Model: { 
    Estimates: [{ 
        Id: 1, DataItems: [{Id: 1, Amount: 100}, {Id: 2, Amount: 200}] },
        Id: 2, DataItems: [{Id: 3, Amount: 300}, {Id: 4, Amount: 400}] }
    ]}

How can I set up an Angular $watch to detect when any of the Amount values change?

I tried using

$scope.$watch("budget.Estimates.DataItems", function () {
    console.log("Watch Fired");
});

with no luck.

Also, is there a nice, Angular way to aggregate the sum of all these Amount values?

http://stackoverflow.com/questions/14712089/how-to-deep-watch-an-array-in-angularjs - might help. — tymeJV, Jan 22 '15 at 19:12
`budget.Estimates` is array, so it has no property `DataItems` — charlietfl, Jan 22 '15 at 20:17

score 0 · Answer 1 · answered Jan 22 '15 at 20:52

Thanks for the link, tymeJV. That pointed me in the right direction.

The solution was to do this:

$scope.$watch("budget.Estimates", function () {
    console.log("Watch Fired");
}, true);

The 3rd parameter signals angular to deep compare the values. Not especially efficient, but it works...

How do I detect a change in a multi-dimension array in AngularJS

1 Answers1