Event loop Angular. Some functions not running on app initialisation until a button is clicked? -FIREBASE

Question

Background:

I have the following setup to authenticate retrieve my user and then retrieve his credentials. I am unclear on the event loop even after reading the documentation.

The Question:

The user is not displayed until I click a button? Every other kind of function runs on initialization like the alerts and stuff but why is my retrieve user function working until another button is pressed (pressing any button )?

Summary:

In order to retrieve the username for some reason I need to click something. I want the username to be retrieve on initialization .

crossfitApp.controller('globalIdCtrl', ["$scope",'$q','defautProfileData','$timeout', function ($scope,$q,defautProfileData,$timeout) {
    $timeout(function() {
                    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){

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



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

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

             } 
             else if (user) {
             //logged in 
                  $scope.$apply(function(){getProfile(user.id);})


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




            }
            else {
            // user is logged out
            console.log('logged out');

             $scope.authenticated.currentUserid =null;
            $scope.authenticated.currentUserid =null;

                }


            });

},100);

            }]);  //GlobaldCtrl

Answer 1

I would move most of your code to a service, and call the service from your controller, like this. I also included a deferred object in your login as I bet this is async

crossfittpApp.service('firebase',function($q) {
    return {
        getUser : function(authenticated) {
            var dataRef = new Firebase("https://glowing-fire-5401.firebaseIO.com"),
                myFbvar =null,
                getProfile(userID) {

                    myprofile= new Firebase("https://glowing-fire-5401.firebaseio.com/profiles/"+userID+"/username");
                    myprofile.once('value', function(nameSnapshot) {
                        authenticated.currentUser = nameSnapshot.val();                                                    
                    });
                },
                deferredObj = $q.defer();
                auth;
             auth = new FirebaseSimpleLogin(dataRef, function(error, user) {
                if (error) {
                    //Error
                    console.log ('error');
                    deferObj.reject();
                } 
                else if (user) {
                    //logged in 
                    getProfile(user.id);
                    console.log('logged in');
                    authenticated.currentUserid = user.id ;
                    deferObj.resolve(auth);
                }
                else {
                    // user is logged out
                    console.log('logged out');
                    authenticated.currentUserid =null;
                    deferObj.resolve();
                }
            }
            return deferObj.promise;

        }
    }
});

crossfittpApp.controller('globalIdCtrl',function(firebase) {
    $scope.authenticated = {
        currentUser: null,
        avatarUrl: "", 
        emailAddress: "",
        settings: "",
        currentUserid: null,
    };
    firebase.getUser(authenticated)
    .then(function(_auth) {
        $scope.auth = _auth;
    },
    function() {
         //auth error here
    });
});

Answer 2

You're not triggering Angular's HTML Compiler, so Angular doesn't know you've changed the JS variables.

Whenever you use an event like ng-click/ng-submit/etc, Angular fires $scope.$apply(), which checks for any changes to your $scope variables and applies them to the DOM, which is why it shows up after this.

You can correct this issue by alerting Angular that it needs to run $apply by using $timeout:

angular.controller('MyController', function($timeout) {
    myprofile= new Firebase("https://glowing-fire-5401.firebaseio.com/profiles/"+userID+"/username");
    myprofile.once('value', function(nameSnapshot) {
        $timeout(function() {
            authenticated.currentUser = nameSnapshot.val();        
        });
    });

    auth = new FirebaseSimpleLogin(dataRef, function(error, user) {
        if (error) {
            //Error
            console.log ('error');
        } 
        else if (user) {
            $timeout(function() {
               authenticated.currentUserid = user.id ;         
            });
        }
        else {
            $timeout(function(){ 
               authenticated.currentUserid =null;
            });
        }
    });
});

You should utilize angularFire, which abstracts these complexities.

There are some more questions like this one here, here, and here.