angularjs - Service variable not updating in controller -

i have navbarctrl outside of ng-view. have login controller talks service user logged in. once user logged in, want navbar update user's email address. life of me, can't seem navbar scope update data loaded in "auth" service once user logged in.

this 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 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@email.com'}             authenticated = true;             callback(true);             //actual code logging in taken out brevity         }     } }) 

and login , 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 should work $scope.user = auth.getuser();  //experimenting unsuccessfully $watch $scope.$watch(auth.isauthenticated(),function () {     $scope.user = auth.getuser() })  //clicking on refresh button way can work $scope.refresh = function() {     $scope.user = auth.getuser() } } 

from research have thought $scope.user = auth.getuser(); work, it's not , i'm @ complete loss how how can navbar updated when user logged in. in advance help.

update: well, learn new every day... remove () watch results of function:

$scope.$watch(auth.isauthenticated, function() { ... }); 

updated fiddle

in fiddle, notice how 'watch1' , 'watch3' both trigger second time when value of $scope.isauthenticated changes.

so, general technique watch changes primitive value defined on service:

• define api/method returns (the value of) primitive
• $watch method

to watch changes object or array defined on service:

• define api/method returns (a reference to) object/array
• in service, careful modify object/array, don't reassign it.
  e.g., don't this: user = ...;
  rather, this: angular.copy(newinfo, user) or this: user.email = ...
• normally you'll assign local $scope property result of method, hence $scope property reference actual object/array
• $watch scope property

example:

$scope.user = auth.getuser(); // because user reference object, if change object // in service (i.e., not reassign it), $scope.user // likewise change. $scope.$watch('user', function(newvalue) { ... }, true); // above, 3rd parameter $watch set 'true' compare // equality rather reference.  if using angular 1.2+ // use $watchcollection() instead: $scope.$watchcollection('user', function(newvalue) { ... }); 

---

original answer:

to watch results of function, need pass $watch function wraps function:

$scope.$watch( function() { return auth.isauthenticated() }, function() { ... }); 

fiddle. in fiddle, notice how 'watch3' triggers second time when value of $scope.isauthenticated changes. (they trigger initially, part of $watch initialization.)