How Angular "$watchs" arrays but wont watch properties?

Question

I have two controllers communicating via a service (factory).

OfficerCtrl and NotificationCtrl they communicate via the notification service.

Here's the NotificationCtrl and the notification service.

angular.module('transimat.notification', [])
.controller('NotificationsCtrl', function($scope, notification) {
    $scope.msgs = notification.getMsgs();
    $scope.showNotification = false;
    $scope.$watchCollection('msgs', function() {

    //put break point here: It enters
        $scope.showNotification = $scope.msgs.length > 0;
    });
    $scope.close = function(index) {
        notification.close(index);
    };

    $scope.showModal = false;
    $scope.modalMsg = notification.getModalMsg();
    $scope.$watch('modalMsg', function() {

    //put break point here: Wont enter
        $scope.showModal = $scope.modalMsg !== null;
    },
    true);

})
.factory('notification', function($interval) {
    var severity = ['success','info','warning','danger','default'];

    var msgs = [];

    var modalMsg = null;

    var notification = {

        showSuccess: function(summary, detail, delay) {
            showMsg(severity[0], summary, detail, delay);
        },

        //...

        close: function(index) {
            msgs.splice(index,1);
            return msgs;
        },

        getMsgs: function() {
            return msgs;
        },

        // MODALS
        getModalMsg: function() {
            return modalMsg;
        },

        showModalMsg: function(summary, detail, uri) {
            modalMsg = {
                summary: summary,
                detail: detail,
                uri: uri
            };
        },

        closeModal: function() {
            modalMsg = null;
        }
    };

    var showMsg = function(severity, summary, detail, delay) {

        var msg = {
            severity: severity,
            summary: summary,
            detail: detail
        };
        msgs.push(msg);
        if (delay > 0) {
            $interval(function() {
                msgs.splice(msgs.length - 1, 1);
            }, delay, 1);
        }
    };

    return notification;
});

That's my notification ctrl/service.

Now in my OfficerCtrl I "push" notifications via the notification service.

angular.module('transimat.officers', [])
.controller('RegisterOfficerCtrl', function (
    $scope,
    notification) {
    // business logic
// this WONT work
    $scope.showModal = function(){
        notification.showModalMsg('NOW','BLAH','officer/1234');
    }
// this works
    $scope.showNotification = function() {
        notification.showSuccess('Success', 'Blah blah.', 5000);
    };

})

It will watch arrays but wont watch "normal" vars. So I have to questions:

• The showNotification() works, but the showModal() wont work. It has to do with some pointer thing? The Arrays have a "strong" pointer and the normal vars have "weak" pointers and get ignored/lost by the $scope.$watch expression?

• How do I solve this?

Answer 1

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