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