Deep watch doesn't work

Question

Have plunk: http://plnkr.co/edit/hdstMO7BDGGsNRUDJhQS?p=preview

Deep watching fires when change 'name' or 'surname', but doesn't fire when change 'phones'. Why? How can i watch full object or how to do this in angular-way?

Answer 1

The problem is in this line:

<span contenteditable ng-model="phone">{{ phone }}</span>

Since the phones is an array of primitive values, ngRepeat will create a copy of each phone on a scope created by ngRepeat. Then your ngModel is bound to this copy so the original object isn't changed and this is why your deep watch doesn't fire.

The remedy is simple, change the line in question to

<span contenteditable ng-model="contact.phones[$index]">{{ phone }}</span>

and you should be set: http://plnkr.co/edit/dxKBw3uZqSA4mfCDU2h1?p=preview