Angular Session var not updating - angularjs

Question

I have been implementing a login feature in my Angular app and have it working for the most part. I am trying to show the userName in the header section. But it won't update after they login until the refresh the screen. What do I need to add to refresh that data?
I am including my header bar like so:
<div data-ng-include="'app/layout/topnav.html'"></div>
Here is my top nav section that I need the two way binding for Session.
(function() {
'use strict';
angular
.module('app.layout')
.controller('TopNav', TopNav);
TopNav.$inject = ['$route', 'routehelper', 'Session', 'authentication'];
function TopNav($route, routehelper, Session, authentication) {
/*jshint validthis: true */
var vm = this;
var routes = routehelper.getRoutes();
vm.isCurrent = isCurrent;
vm.userName = Session.userName;
activate();
function activate() { getNavRoutes(); }
function getNavRoutes() {
vm.navRoutes = routes.filter(function(r) {
return r.settings && r.settings.nav;
}).sort(function(r1, r2) {
return r1.settings.nav - r2.settings.nav;
});
}
function isCurrent(route) {
if (!route.title || !$route.current || !$route.current.title) {
return '';
}
var menuName = route.title;
return $route.current.title.substr(0, menuName.length) === menuName ? 'current' : '';
}
vm.logout = function() {
vm.userName = null;
authentication.logout();
};
}
})();
Here is my Session Service:
(function() {
'use strict';
angular.module('blocks.authentication').service('Session', function() {
this.create = function(userId, userName, userRole) {
this.userId = userId;
this.userName = userName;
this.userRole = userRole;
};
this.destroy = function() {
this.userId = null;
this.userName = null;
this.userRole = null;
};
return this;
});
})();
Including the nav like this, it only runs once. So once the Session is actually set on my log in page, it does not update here. Am I missing something? What is a better way to achieve this?

Answer 1

There are a couple of options, the first should work.
First, instead of setting vm.userName = Session.userName you should change it to vm.userName = Session.getUserName() where Session.getUserName is like:
function getUserName() {
return this.userName;
}
This is because when the controller is instantiated it sets vm.userName to whatever the value of Session.userName is at that point in time. It never knows about the change. Setting it to a function, it should check for that during every $digest cycle.
Otherwise, you could use a good old fashioned observer pattern to solve the issue.
In the TopNav controller:
// Register the setting of vm.userName as an observer
Session.registerObserverCallback(function () {
vm.userName = Session.userName;
});
And then in Session:
this.create = function(userId, userName, userRole) {
this.userId = userId;
this.userName = userName;
this.userRole = userRole;
// Everytime this changes, notify everyone
this.notifyObservers();
};
// Since almost everything in angular is a singleton, anyone can register here
// and whenever notifyObservers() is called, everyone gets notified of the new values
var observerCallbacks = [];
var registerObserverCallback = function (callback) {
observerCallbacks.push(callback);
};
var notifyObservers = function () {
angular.forEach(observerCallbacks, function (callback) {
callback();
});
};

Answer 2

This is a sample Controller to display the injected Session details. I assumed, the Session object contains the data. Session is the generated service.
angular.module('myApp')
.controller('SessionController', function($scope, Session) {
$scope.userName = Session.userName;
}
Sample usage
<div>{{userName}}</div>