AngularJS $watch root scope variable for changes

Question

I have the following $rootScope variable which I use to save the current logged in user privilege level, then I access this variable from other controllers. Is there a way I can watch the rootScope variable for changes in order to update controllers specific variables with any changes to the root scope variable? Below is the code I am using so far, can someone please tell me what I am doing wrong and how to fix it? Thanks

In app.js under .run:

 $rootScope.uPLevel = 0; 

.controller

   $scope.$watch($rootScope.uPLevel, function() {             $scope.userPLevel = $rootScope.uPLevel;    }, true); 

Answer 1

The first parameter to $watch should either be a string or a function (docs). Right now you're passing it the value of $rootScope.uPLevel on controller initialization.

$scope.$watch(function() {   return $rootScope.uPLevel; }, function() {   $scope.userPLevel = $rootScope.uPLevel; }, true); 

Two sidenotes:

• It may be prudent to store this value in a service instead of $rootScope.
• If uPLevel is only an integer (as your example suggests) then you don't need to pass true as the third parameter - that's only for arrays and objects. If you do want to watch a collection, then I suggest using $watchCollection instead.

Answer 2

I recommend watching $rootScope variables like that:

$scope.$watch('$root.uPLevel', function() {     $scope.userPLevel = $rootScope.uPLevel; }); 

This way, When current directive/controller is destroyed. It clears the watch as well. In $rootScope.$watch case, the watch stays forever.