AngularJS does not update after value change

Question

My intention is to update the navigation bar after the user login. Basically, it should change Login to Hi, {{usr.username}} right after the login.

Answer 1

AngularJS won't update the view if any changes to the $scope object are done outside of its $digest loop.

But worry not, Firebase is such a popular tool it has a AngularJS service. It's called AngularFire and you should be using it instead of global Firebase object.

So your code will be something similar to:

var auth = $firebaseAuth(FirebaseRef);
auth.$authWithPassword({
    email: email,
    password: password
}).then(function (authData) {
    console.log('Authenticated successfully with payload:', authData);
    var sync = $firebase(FirebaseRef.child("users").child(authData.uid));
    var syncObject = sync.$asObject();
    syncObject.$bindTo($scope, "usr");
}).catch(function (error) {
    console.error('Login Failed!', error);
});

Read more in the documentation of AngularFire