Angular name doesn't refresh

Question

Auth Ctrl:

.controller('AuthCtrl', function(Users, Auth, $state) {
var authCtrl = this;

authCtrl.user = {
  name: '',
  email: '',
  password: ''
};

authCtrl.login = function() {
  Auth.$authWithPassword(authCtrl.user).then(function(auth) {
    $state.go('home');
    console.log('Logged in');
  }, function(error) {
    authCtrl.error = error;
  });
};

authCtrl.register = function() {
  Auth.$createUser(authCtrl.user).then(function(user) {
    Auth.$authWithPassword(authCtrl.user).then(function(authData) {
      Users.saveUser({
        uid: authData.uid,
        name: authCtrl.user.name,
        mail: authData.password.email
      });
      console.log('Registered');
      $state.go('home');
    });
  }, function(error) {
    authCtrl.error = error;
  });
};
});

Router:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('login', {
        url: '/login',
        controller: 'AuthCtrl as authCtrl',
        templateUrl: 'auth/login.html'
      })
      .state('register', {
        url: '/register',
        controller: 'AuthCtrl as authCtrl',
        templateUrl: 'auth/register.html'
      })

HTML which causes troubles:

<li ng-show="homeCtrl.isLoggedIn()" ng-class="{active: homeCtrl.isSelected(5)}">
  <a href ng-click="homeCtrl.selectTab(5, 'profile')">{{ homeCtrl.getUserName(homeCtrl.currentUser.uid) }}</a>
</li>

Home Ctrl has basically the same method as users does:

homeCtrl.getUserName = Users.getUserName;

getUserName: function(uid) {
    if (users.$getRecord(uid)) {
      return users.$getRecord(uid).name;
    }
  },

Hello, I'm using Firebase + Angular to create my own app. The problem is following: When I'm signing up(or signing in) my username doesn't being refreshed automatically on the page, I have to reload it manually. I guess it's about resolving promises for register and login state, but I have no idea, what to add. Could anyone please help me with this, I'm just stuck.

And the other thing - username appearance takes few seconds, it doesn't happen instantly. Guess it's about function calling in expression, but I don't know how to refactor it.

Any help would be greatly appreciated!

Answer 1

I ran into a similar issue when creating my Angular + Firebase application. The solution I ended up implementing was I had my auth service broadcast an auth login change after a user successfully authenticated:

//In auth service
$rootScope.$broadcast('auth-userLoginChange');

and I wrote a custom directive for my menu (which displayed the user's name or "Sign In" depending on auth state) which listened for the auth login change and updated the menu accordingly:

//In menu directive   
//Listen to login/logout changes, update menu.
scope.$on('auth-userLoginChange', scope.setLoginMenu);

This solution helped me not have to reload the application to see the menu changes and being able to easily update my menu with the user's name after successful login.

Answer 2

Adding this state check in the homeCtrl fixes this problem.

Auth.$onAuth(function(authData) {
  if (authData) {
    homeCtrl.currentUser = authData;
  }
});