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 u

Answer 1

Using user as your variable name is generally not a good idea. I once I changed it ti currentUser everything worked for me.

Answer 2

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.)

Answer 3

Try to change

$scope.$watch(Auth.isAuthenticated(),function () { $scope.user = Auth.getUser() })

to

$scope.$watch(Auth.isAuthenticated(),function () { $scope.user = Auth.getUser() }, true)

Look at the AungularJs $watch documentation for a detailed explanation, the default value is false which means that Angular detects changes in the first parameter values by reference, while passing true means the check is done by equality. Being the parameter a function, the check returns always false, since the reference to the function is always the same.