Initializing an AngularJS app

I've created code in each of my controllers and directives that calls an initer function in the main app.js module, the function just passes strings which are placed into an array and counted. Once all the controllers and directives have been accounted for, then the first function that runs in the main app is called.

I had to create this solution, because if I just call a function in my main app.js to another function in one of my other controllers, I may get undefined because it hasn't fully loaded yet.

I've built a dashboard app where I ran into this problem, and now building a mobile app using AngularJS and running into the same problem again.

This is a problem I have in development, where I want each module to be included in a separate script tag, makes it easier for development. I don't concatenate and minify until deployment. Thus each script module may load out of order, or slower than the app.js.

<!-- App modules -->
<script src="app/app.js"></script>
<script src="app/authentication/authFactory.js"></script>
<script src="app/api/apiFactory.js"></script>
// etc ...

The initer function in my main app.js file, it waits till the vm.pingArray has a length of 9 before it runs.

// Collects pings from Controllers and Directives
function initer(ping) {
    vm.pingArray.push(ping);
    // console.log('vm.pingArray.length = ', vm.pingArray.length);

    // Check if all modules have pinged in:
    if (vm.pingArray.length === 9) {

        if ($location.$$url !== "/main") {
            vm.customURL = true;
        } else {
            vm.tickerType = 'all';
        }

        // Init & start TickersPanel:
        if (vm.customURL) {
            InitTickersFactory.startTickersPanel(vm.tickerType, vm.selectedTicker);    
        } else {
            InitTickersFactory.startTickersPanel();
        }
    }
}

Code in my Directives Controllers, exactly the same, just the string names change:

// Store scope
ScopeFactory.saveScope('tagsPanel', vs);

// Ping root
root.main.initer('tagsPanelDirective');

^ as you can see, this allows for each Directive to fully load, store it's own scope into the ScopeFactory (so I don't get undefined later). Then it pings the initer function in the root app.js file.

This is the startTickersPanel function in the InitTickersFactory:

function startTickersPanel(type, ticker) {
    type   = type   || 'all';
    ticker = ticker || 'SPY';

    tickers = ScopeFactory.getScope('tickersPanel');
    tickers.tickersPanel.initTickersPanel(type, ticker, true);
}

If I don't have my pingArray check code in the app.js module, and just call InitTickersFactory.startTickersPanel(); in app.js, I will get tickers.tickersPanel is undefined inside of the initTickersFactory.js.