AngularJS: HTML partials ng-if not updating when $scope.loggedInUser is updated - angularjs

Question

I am new to the AngularJS community and was hoping someone could help me with the following issue.
I have created a light CMS system based on an incomplete tutorial and have filled in some of the pieces myself, but i cannot get the HTML partials to update when the $scope changes;
HTML partial (admin-login.html)
<div ng-if="loggedInUser">
Welcome {{loggedInUser}} | My Admin | Logout
</div>
my directive (directives.js)
directive('adminLogin', [
function() {
return {
controller: function($scope, $cookies) {
var user = $cookies.get('loggedInUser', {path: "/"});
$scope.loggedInUser = user;
},
templateUrl: 'partials/directives/admin-login.html'
};
}
])
my controller (controllers.js)
controller('AdminLoginCtrl', ['$scope', '$location', '$cookies', 'AuthService','$log','flashMessageService',
function($scope, $location, $cookies, AuthService, $log, flashMessageService) {
$scope.credentials = {
username: '',
password: ''
};
$scope.login = function(credentials) {
AuthService.login(credentials).then(
function(res, err) {
$cookies.put('loggedInUser', res.data);
$location.path('/admin/pages');
},
function(err) {
flashMessageService.setMessage(err.data);
$log.log(err);
});
};
}
])
The scope updates but i have to refresh the page to show or hide the admin-login.html.
Any help is greatly appreciated, thank you in advance.

Answer 1

$scope.loggedInUser won't be updated once you update cookie, you should watch for cookie change in directive and update $scope manually.
directive('adminLogin', [
function() {
return {
controller: function($scope, $cookies) {
$scope.$watch(function () {
return $cookies.get('loggedInUser', {path: "/"});
}, function (value) {
$scope.loggedInUser = value;
});
},
templateUrl: 'partials/directives/admin-login.html'
};
}
])