Update $scope and reflect in view - authentication

Question

In my angularjs app I am rendering my "navigation-bar" div for every page.
After user logs in and redirect to details page, then I want I am updating $scope which is not reflected into the view.
To reflect the change of $scope I am calling $digest by using $scope.$apply(). Seems it not updating and the $scope update still not reflecting in my view.
My code looks like below:
CONTROLLER:
function NavCtrl($scope){
//as isAuth false
$scope.showLogin = true;
$scope.showLogout = false;
}
function ProductDetails($scope){
//as isAuth true
$scope.showLogin = false;
$scope.showLogout = true;
if (!$scope.$$phase) {
//$digest or $apply to reflect update of scope update
$scope.$apply();
}
}
VIEW:
<div id="navigation-bar" ng-controller="NavCtrl">
<li ng-show="showLogin">Login</li>
<li ng-show="showLogout">Logout</li>
</div>
What I am doing wrong? Am I missing any point? By the way I went through other questions like AngularJS $scope updates not reflected in the view but it doesn't help in my case.

Answer 1

The main problem is that you are using two different controllers. Each controller has it's own scope (i.e. the scope is not global), so when you change showLogin in your ProductDetails it is only the local scope that changes, not that of NavCtrl.
You can either rewrite it to use one controller, or pass data between your controllers, there are several ways to do that:
You can set data on the $rootScope . The rootScope is a global scope that all controllers can access and that you can always use in templates. I recommend keeping the rootScope to a minimum since the rootScope is shared everywhere and you might end up with a big mess of variables in it.
You can pass data through a service. Only one instance of each service is ever created, so different controllers can access the same service and get the same data.
You can use .$broadcast to send a signal to any child controller. This is probably also best kept to a minimum, a lot of broadcasts will sooner or later slow you down (although the limit should be high).

Answer 2

The problem is you should be using a single controller for this. Here is an example of a controller that will display the correct menu depending on his connected scope variable. The value is set with AJAX or somewhere else in your code.
CONTROLLER:
function NavCtrl($scope, $rootScope){
$scope.showLogin = true;
$scope.showLogout = false;
$rootScope.$watch("connected", function() {
if ($rootScope.connected) {
$scope.showLogin = false;
$scope.showLogin = true;
} else {
$scope.showLogin = true;
$scope.showLogin = false;
}
});
}
VIEW:
<div id="navigation-bar" ng-controller="NavCtrl">
<li ng-show="showLogin">Login</li>
<li ng-show="showLogout">Logout</li>
</div>
Connect me

Answer 3

I suggest an AuthUserService to keep track of login state, and injecting that service into your NavCtrl and any other controllers that need to know about the user:
.factory('AuthUserService', ['$http','$q',
function($http, $q) {
var user = {};
return {
user: function() {
return user;
},
login: function(user_credentials) {
$http.post('/login', user_credentials).then(
function(response) {
angular.copy(response.data, user);
...
});
},
logout: function() { ...
}
}
}])
.controller('NavCtrl', ['AuthUserService','$scope',
function(AuthUserService, $scope) {
$scope.user = AuthUserService.user();
$scope.$watch('user.name', function(name) {
if(name) {
$scope.loggedIn = true;
} else {
$scope.loggedIn = false;
}
});
}])
<div ng-controller="NavCtrl">
<li ng-hide="loggedIn">Login</li>
<li ng-show="loggedIn">Logout</li>
</div>