Angular function not running in controller or binding to $scope variable

Question

I am sure this is something simple, but I have tried this numerous ways with no result.

I have a factory that retrieves profile data from a simple endpoint, /api/me . It should return name, email, etc.... and it works fine for me profile page. However, my navbar seems to be a different story.

Some functions in the navBarCtrl seems to kick in, but it simply returns a boolean value. The function I REALLY want to kick in, seems to be inert. It could be because it's waiting for some sort of event.

I attempted to use a broadcast when the auth service checks to see if the user is authenticated, but this didn't seem to do it either.

First, the Node API endpoint. Probably not necessary, but just in case.

app.get('/api/me', ensureAuthenticated, function(req, res) {
  User.findById(req.user, function(err, user) {
    res.send(user);
  });
});

The Account factory.

 angular
    .module('issuefy')
    .factory('Account', Account);

  Account.$inject = ['$http', 'LocalStorage'];

  function Account($http, LocalStorage) {

    return {
          getUser: function() {
            return $http.get('/api/me');
          },
          updateProfile: function(profileData) {
            return $http.put('/api/me', profileData);
          }
        };

Now the controller. Note, I attempt to do it two diffent ways.

angular
      .module('issuefy')
      .controller('NavbarCtrl', NavbarCtrl);

    NavbarCtrl.$inject = ['$scope', '$http', '$location', 'LocalStorage', 'QueryService', '$auth', 'toastr', 'Account'];

    function NavbarCtrl($scope, $http, $location, LocalStorage, QueryService, $auth, toastr, Account) {

      $scope.getNavUser = function() {
        Account.getUser()
          .then(function(response) {
            $scope.userNav = response.data;
          })
          .catch(function(response) {
            toastr.error(response.data.message, response.status);
          });
      };

      $scope.$on('user-authenticated', function(event, args) {
        Account.getUser()
          .then(function(response) {
            $scope.userNav1 = response.data;
          })
          .catch(function(response) {
            toastr.error(response.data.message, response.status);
          });

});

      $scope.isAuthenticated = function() {
        return $auth.isAuthenticated();
      };
    }

Now the template page.

<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top">
  <div class="navbar-header">
    <a class="navbar-brand" href="/"><i class="ion-ios7-pulse-strong"></i> Issuefy</a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="/#/">Home</a></li>
    <li ng-if="isAuthenticated()"><a href="/#/profile">Profile</a></li>
  </ul>
  <ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
    <li><a href="/#/login">Login</a></li>
    <li><a href="/#/signup">Sign up</a></li>
        {{user.name}}
  </ul>
  <ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
    <li><a href="/#/logout">Logout</a></li>
        <li><a href="/#/logout"><span ng-bind="userNav.email"></span></a></li>
        <li><a href="/#/logout"><span ng-bind="userNav1.email"></span></a></li>
        <li>{{userNav1.email}}</li>
        <li>
            <div class="btn-group" uib-dropdown is-open="status.isopen">
          <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
            <i class="fa fa-user">a {{userNav.email}} email</i></span>
          </button>
          <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
            <li role="menuitem"><a href="#">Action</a></li>
            <li role="menuitem"><a href="#">Another action</a></li>
            <li role="menuitem"><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a href="#">Separated link</a></li>
          </ul>
        </div>
</li>
  </ul>
</div>

<div ui-view></div>

What am I missing? I am sure it's something simple.

Answer 1

I want to know what return $auth.isAuthenticated(); , is it sync or async? If it is async, then the expression isAuthenticated() maybe return the wrong value.