AngularJS watch and object equality

This is something I wasted half a day finding out what’s wrong with my code.

When watching a property in Angular, by default, when the object has changes Angular will check the object for equality by reference. That means that if you modified a property within your object, or added an item to a watched array, it will not trigger.

The solution is to define the watch’s equality for value instead of reference, this is simply done by adding a boolean property to your watch call.

See this fiddle for an example: