How to update html header after login in an angular/node.js application?

I am trying to get a header to update after login. I have used both $on and $watch in this effort to no avail. When I refresh it works correctly. Code is as follows below.

header.html (missing excess nav bar code for simplicity)

<li><a ng-href="#/login" ng-hide="showMenu">Login</a></li>
<li><a ng-href="#/signup" ng-hide="showMenu">Signup</a></li>
<li><a href="javascript:" ng-click="logout()" ng-show="showMenu">Logout</a></li>

app.js

$stateProvider
  .state('app', {
    url: '',
    views: {
      'header': {
            templateUrl: 'views/partials/_header.html',
            controller: 'HeaderCtrl'
      }
    }
  })

header.js (The broadcast fires correctly as demonstrated by the console.logs)

angular.module('urbinsight')
.controller('HeaderCtrl', function ($scope, $rootScope, $state, $location, UserAuthFactory, AuthFactory) {

$scope.logout = function () {
  UserAuthFactory.logout();
  $rootScope.$broadcast('loginStateChange');
  $location.path('/');
};

$scope.showMenu = AuthFactory.loggedStatus();

$rootScope.$on('loginStateChange', function(){
  console.log($scope.showMenu)
  $scope.showMenu = AuthFactory.loggedStatus(); 
  console.log($scope.showMenu)
  })
})

authService

angular.module('urbinsight.services')
.factory('AuthFactory', function ($window) {
var isLogged = false;

return {
  check: function() {
    if ($window.sessionStorage.token && $window.sessionStorage.user) {
      isLogged = true;
    } else {
      isLogged = false;
      delete this.user;
    }
  },
  loggedStatus: function() {
    return isLogged;
  },
  changeLoggedStatus: function() {
    isLogged = !(isLogged);
  }
};
})

Please tell me what I am doing wrong.