The first watch watches the array of messages msgs
of your controller scope, which is the array returned by the service getMsgs()
function. So, each time the content of this array changes, the callback function is called. When showSuccess()
is called, a new message is pushed to the array, and the callback is thus called.
The second watch watches the field modalMsg
of your controller. So, each time a new value is assigned to $scope.modalMsg
, or each time it's not equal to its previous value, the callback function is called. But a new value is never assigned to this variable. It's only assigned once, before the watch is created. The showModalMsg()
function of the service assigns a new value to its own, private, modalMsg
variable, but doesn't assign any new value to the controller's modalMsg
variable, which still references the old notification modalMsg
object:
Before showModalMsg():
$scope.modalMsg -----------------> object
^
|
notification modalMsg ---------------|
After showModalMsg():
$scope.modalMsg -----------------> object
notification modalMsg -----------> other object