Service variable not updating in controller

Question

I have a NavbarCtrl that is outside of ng-view. I have a login controller that talks to a service to get a user logged in. Once the user is logged in, I want the Navbar to update with the user's email address. However for the life of me, I can't seem to get the Navbar scope to update with the data that is loaded in to my "Auth" service once the user is logged in.

This is my main index.html:

<div class="navbar navbar-inverse navbar-fixed-top">          <div class="navbar-inner">             <div class="container">                 <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </a>                 <a class="brand" href="#">Brim</a>                  <div class="pull-right"  ng-controller="NavbarCtrl">                     <div ng-click="refresh()">hello</div>                     {{ user.email }}                 </div>             </div>         </div>      </div>      <div class="container" ng-view> 

And my service:

.factory('Auth', function($resource) {     var authenticated = false;     var user = {};     return {         isAuthenticated: function () {             return authenticated;         },         getUser: function() {             return user;         },         login: function(loginUser, callback) {             user =  {email:'[email protected]'}             authenticated = true;             callback(true);             //actual code for logging in taken out for brevity         }     } }) 

And my Login and Navbar controllers:

function LoginCtrl($scope, $location, Auth) {  $scope.login = function() {     Auth.login($scope.user, function(success) {         if(success) $location.path('/dashboard');         //console.log(Auth.getUser())     }); }  }  function NavbarCtrl($scope, Auth)  {  //thought this should work $scope.user = Auth.getUser();  //experimenting unsuccessfully with $watch $scope.$watch(Auth.isAuthenticated(),function () {     $scope.user = Auth.getUser() })  //clicking on a refresh button is the only way I can get this to work $scope.refresh = function() {     $scope.user = Auth.getUser() } } 

From my research I would have thought that $scope.user = Auth.getUser(); would work, but it's not and I'm at a complete loss as to how how I can get my Navbar updated when a user is logged in. Thanks in advance for any help.

Answer 1

Update: well, you learn something new every day... just remove the () to watch the results of a function:

$scope.$watch(Auth.isAuthenticated, function() { ... }); 

Updated fiddle

In this fiddle, notice how 'watch1' and 'watch3' both trigger a second time when the value of $scope.isAuthenticated changes.

So, this is the general technique to watch for changes to a primitive value that is defined on a service:

• define an API/method that returns (the value of) the primitive
• $watch that method

To watch for changes to an object or array that is defined on a service:

• define an API/method that returns (a reference to) the object/array
• In the service, be careful to only modify the object/array, don't reassign it.
  E.g., don't do this: user = ...;
  Rather, do this: angular.copy(newInfo, user) or this: user.email = ...
• normally you'll assign a local $scope property the result of that method, hence the $scope property will be a reference to the actual object/array
• $watch the scope property

Example:

$scope.user = Auth.getUser(); // Because user is a reference to an object, if you change the object // in the service (i.e., you do not reassign it), $scope.user will // likewise change. $scope.$watch('user', function(newValue) { ... }, true); // Above, the 3rd parameter to $watch is set to 'true' to compare // equality rather than reference.  If you are using Angular 1.2+ // use $watchCollection() instead: $scope.$watchCollection('user', function(newValue) { ... }); 

---

Original answer:

To watch the results of a function, you need to pass $watch a function that wraps that function:

$scope.$watch( function() { return Auth.isAuthenticated() }, function() { ... }); 

Fiddle. In the fiddle, notice how only 'watch3' triggers a second time when the value of $scope.isAuthenticated changes. (They all trigger initially, as part of $watch initialization.)