How can I get notifications of rootScope changes?

Question

I've got a global variable in my rootScope for AngularJS which has properties updated in other various places (outside of angular). For example, lets say the property 'name' is updated on it. It seems like it updates on the root scope fine and after doing an apply or firing a controller function on any child function the view eventually updates, but this is a problem.

How can I get the controllers to update the templates to reflect the rootScope changes immediately?

How can I observe any changes whatsoever on this object, and invoke apply?

Answer 1

Create a watch for it on rootscope ($rootScope.$watch('varName', function (newValue) {}[,true])). The varName parameter accepts expressions with '.' for sub-objects and '[]' for array indexes. The third parameter indicates listening fire changes "inside" the object.

Answer 2

You can create a $watch as so:

// Assuming that $rootScope.name exists
$rootScope.$watch('name', function(newValue, oldValue)
{
    // You have access to both the newValue
    // and the oldValue
});

To $watch for objects, taking this from Angular's Site, a third boolean character is needed

objectEquality (optional) boolean: Compare object for equality rather than for reference.

// Assuming that $rootScope.obj exists
$rootScope.$watch('obj', function(newValue, oldValue)
{
    // You have access to both the newValue
    // and the oldValue
}, true);

But know that it is not a good idea to use the $rootScope to store content. You should consider using a service or a factory for that purpose. Read more about this here.