Angular: display items in navbar after login

I am new to AngularJS and I am running into problems when trying to show userInfo in my nav and exit button, but only once when I am logged in.

1)

I am using ng-show to show the Logout button only when I login, but this button appears in all cases.

2)

I am unable to bind the userInfo coming from the created authentication service.

Navbar directive :

'use strict';

angular.module('clientApp')
  .directive('navbar', function() {
    return {
      restrict: 'E',
      templateUrl: 'views/shared/navbar.html',
      controller: 'NavigationCtrl'
    };
});

      

        
        
        
      

    

Navigation controller :

'use strict';

angular.module('clientApp')
 .controller('NavigationCtrl', function ($scope, $location, authentication) {
   $scope.isActive = function(path) {
     return path === $location.path();
   };

   $scope.isLoggedIn = function() {
     return authentication.isLoggedIn;
   };

   $scope.userInfo = function() {
     return authentication.getUserInfo.firstname;
   };
});

      

        
        
        
      

    

Authentication Service :

'use strict';

angular.module('clientApp').factory('authentication', function($http, $q, 
$window, $location, ENV) {
var userInfo;

function init() {
  if ($window.sessionStorage.userInfo) {
    userInfo = JSON.parse($window.sessionStorage.userInfo);
  }
}
init();

function getUserInfo() {
  return userInfo;
}

function isLoggedIn() {
  return ($window.sessionStorage.userInfo) ? true : false;
}

isLoggedIn();

function login(user) {
  var deferred = $q.defer();

  $http.post(ENV.apiEndpoint + 'recruiters/auth', {
    email: user.email,
    password: user.password
  }).then(function(result) {
    userInfo = {
      appToken: result.data['app_token'],
      firstname: result.data['first_name']
    };
    $window.sessionStorage.userInfo = JSON.stringify(userInfo);
    deferred.resolve(userInfo);
    $location.path('/');
    $http.defaults.headers.common['Authorization'] = 'Oauth ' +
    userInfo.appToken;
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
  }

  return {
    login: login,
    getUserInfo: getUserInfo
  };


});

      

        
        
        
      

    

Navabar.html

<div class="header">
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <a class="navbar-brand" href="#/">KDZ</a>
  </div>

  <div class="collapse navbar-collapse" id="js-navbar-collapse">

    <ul class="nav navbar-nav">
      <li ng-class="{active:isActive('/')}"><a href="#/">Home</a></li>
      <li ng-class="{active:isActive('/postings')}"><a ng-href="#/postings">Postings</a></li>
      <li ng-class="{active:isActive('/signup')}"><a ng-href="#/signup">Sign Up</a></li>
      <li ng-show="isLoggedIn">Logged as {{userInfo}}</a></li>
      <li ng-show="isLoggedIn"><a ng-href="#/logout"></a>Logout</li>
    </ul>
  </div>
</div>

      

        
        
        
      

    

I think the binding between the view and the controller or service is wrong, but I cannot figure out how to do it correctly. Anyone have an idea? Thank!