setting $rootScope but value then not visible from another controller

Question

My application requires candidates to be set up with an agency and nationality (among other things). I want to set the list of agencies and nationalities in global variables so that they can be accessed by the profile screen rather than retrieved from the database every time (as they are currently). Thanks to the other questions here I've got so far... but a crucial puzzle piece is clearly missing. The data is being retrieved from the DB but then isn't visible elsewhere.

homecontroller.js which loads up the data...

//Home page Controller
function HomeCtrl($scope, $rootScope, SessionTimeoutService, GetAllAgencies, GetNationalityList){

    GetAllAgencies.getData({}, function(agencieslist, $rootScope) {
        SessionTimeoutService.checkIfValidLogin(agencieslist);
        $rootScope.agencieslistglobal = agencieslist.data;
    });

/*  I tried hard-coding values here - that worked & was passed thro' ok  
    $rootScope.nationalitieslistglobal = [
        {'nationality_id' : 0, 'name' : 'Unknown'},
        {'nationality_id' : 1, 'name' : 'Known'},
        {'nationality_id' : 2, 'name' : 'Pants'},
    ]; */
    GetNationalityList.getData({}, function(nationalitieslist, $rootScope) {
        SessionTimeoutService.checkIfValidLogin(nationalitieslist);
        $rootScope.nationalitieslistglobal = nationalitieslist.data;
    });

    alert($rootScope.nationalitieslistglobal[8].name);
}

The alert doesn't fire at all.

From the candidatescontroller.js:

function CandidatesAddCtrl($scope, CandidateModel, GetNationalityList,      SessionTimeoutService, $http, GetAllAgencies, $rootScope) {
/* commented out as this should now be done globally - this works when it's in place
    GetAllAgencies.getData({}, function(agencieslist) {
        SessionTimeoutService.checkIfValidLogin(agencieslist);
        $scope.agencieslist = agencieslist.data;
    });
*/
    CandidateModel.getBlankCandidate();
    $scope.candidateinfo = CandidateModel;

    // get global agencies list
    $scope.agencieslist = $rootScope.agencieslistglobal;
    alert($scope.agencieslist); // shows 'undefined'

    /*
        GetNationalityList.getData({}, function(nationalitieslist) {
            SessionTimeoutService.checkIfValidLogin(nationalitieslist);
            $scope.nationalitieslist = nationalitieslist.data;
        });
    */
    // get global nationalities list
    $scope.nationalitieslist = $rootScope.nationalitieslistglobal;
....
}

So... when I hard-code the data outside of the GetNationalityList.getData function (the bit that's commented out in the example above), it is populated & passed through OK & my drop-down list populates. When I don't do that, the $rootScope values are 'undefined'.

I have 2 theories -

1. somehow the homecontroller $rootScope isn't being recognised as the global I'm intending (that's just the name of the variable) and some other "passing back" action needs to be taken (I've tried several variations on "return nationalitieslist.data" and assigning it to other variables/handles). Also, nationalitieslist.data is in the same format as the hard-coded list, only it's longer.

2. I'm being caught out by the asynchronous nature of javascript and when I load the second page, the data just isn't there yet. I'm not convinced this is right as the DB call is finishing and I had an alert which showed me a random nationality name and it was there.

My frustration in part is coming from the fact that the GetNationalityList and GetAllAgencies code snippets work and assigns values correctly in the candidate controller (the bits that are now commented out), but are working subtly differently in the homecontroller.

Top tips, anyone, please?

Answer 1

I am sure this article can help. http://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/ I had somewhat of a similar issue but I needed to emit from a factory. My problem was answered here.

Angular $rootScope.$on Undefined

Answer 2

Your 2nd point is more your issue, although it's not JavaScript that's async in nature, it's Angular services such as your GetAllAgencies service. You're making async calls but not waiting for the response. That's why when you assign it manually it all works. Try putting your alert() inside the callback function to the getData() call. This should highlight how the process should work.