AngularJS authentication service + watcher - angularjs

Question

I am making authentication for my app and I've been struggling with getting a service to work properly. I have simplified the code.
The service:
App.factory('AuthenticationService', function() {
var isLoggedIn = false;
return {
isLoggedIn : function() {
return isLoggedIn;
}
}
});
MainController:
App.controller('MainController', [
'$scope',
'AuthenticationService',
function( $scope, AuthenticationService ) {
$scope.isLoggedIn = AuthenticationService.isLoggedIn();
$scope.$watch('AuthenticationService.isLoggedIn()', function (newVal, oldVal) {
console.log("Detected change in service.");
if( newVal !== oldVal ) {
$scope.isLoggedIn = newVal;
}
});
}]);
LoginController:
// Login HTTP request successful, returns a positive answer
// Now I want to change the variable in the service to True
AuthenticationService.isLoggedIn = true;
Main problem: The way the service variable is modified from LoginController right now - it is not reflected in the watcher and I am not sure if it even changes the variable in the service. What is wrong there?
The goal: Instant change in the view after a successful login (ng-show).
Any other constructive criticism towards the code is welcome.

Answer 1

There are several ways.
1) Use broadcast events
2) Create a scope for your service:
App.factory('AuthenticationService', function($rootScope) {
var isLoggedIn = false;
var AuthenticationService = $rootScope.$new();
return AuthenticationService;
});
3) You could watch a property:
App.factory('AuthenticationService', function() {
return {
isLoggedIn : false
}
});
// In your controller:
$scope.$watch('AuthenticationService.isLoggedIn', function(){...
4) You could write a custom watcher:
App.factory('AuthenticationService', function() {
var isLoggedIn = false;
return {
isLoggedIn : function() {
return isLoggedIn;
}
}
});
// In your controller
$scope.$watch(function(){return AuthenticationService.isLoggedIn()}, function(){...