Angular rendering engine & Firebase profile retrieval

Question

What I want:

• firebase checks authentication of page load
• firebase returns userID if logged in
• my function returns the username associated with the user.Id
• assign to the variable that represents the username
• render!
• All on page load

Current Behavior:

The following configuration retrieves the username but will only display the username once I click a login button I have made.For some reason even though I am currently logged in I must click the login button. I want a set up where if I am logged in the app will just know I am logged in from the start!

crossfitApp.controller('globalIdCtrl', ["$scope",'$q','defautProfileData','$timeout', function ($scope,$q,defautProfileData,$timeout) {

                    var  dataRef =   new Firebase("https://glowing-fire-5401.firebaseIO.com");

        $scope.myFbvar =null;
        $scope.authenticated={
                               currentUser: null,
                               avatarUrl: "", 
                               emailAddress: "",
                                   settings: "",
                                   currentUserid: null,

                            };


        function getProfile(userID,assignMe){

            myprofile= new Firebase("https://glowing-fire-5401.firebaseio.com/profiles/"+userID+"/username");
            myprofile.once('value', function(nameSnapshot) {
                                                            assignMe = nameSnapshot.val();                                                    
                                                        });
            };





                    $scope.auth = new FirebaseSimpleLogin(dataRef, function(error, user) {

                                            if (error) {
                                                                      //Error
                                                    console.log ('error');

                                                } 
                                                else if (user) {
                                                                      //logged in 
                                                    $timeout(function() {

                                                        getProfile(user.id,);

                                                     });
                                                     console.log('logged in');
                                                     $scope.authenticated.currentUserid = user.id ;




                                             }
                                                 else {
                                                     // user is logged out
                                                     console.log('logged out');
                                                     $timeout(function() {
                                                            $scope.authenticated.currentUserid =null;
                                                    });
                                             }


                                      });


    }]);  //Global

Answer 1

In your else if( user ) logic, you forgot to put your scope var inside the $timeout, so it is being set properly, but Angular doesn't learn about it until the next time $apply is called (e.g. ng-click, ng-submit, etc).

Thus:

else if (user) {
   //logged in 
   $timeout(function() {
      getProfile(user.id,);
      $scope.authenticated.currentUserid = user.id ; // moved into $timeout
  });
  console.log('logged in');
}

You can read more about why this matters here and here.