Make angular Manually go to compile phase

Question

I'm using ocLazyLoad to load my modules on demand in Angular. These modules are totally different and we should check using the server which module should we load. Before Using ocLazyLoad I was loading all concatenated js files of these separate modules in my main View. So all of them we're loading.

Now as it's obvious I'm loading these files on demand, which mean it should read data from the server and see which modules should be loaded and load a megabyte File and most importantly load it before angular begins to compile the View.

I was using ocLazyLoad's promise to $compile the view (body) but since it was being done twice or even more sometimes my directives weren't working.

So I think I have two options:

1. Make angular manually compile the view (which I searched a lot and I couldn't find how!!) after the modules are injected and loaded by ocLazyLoad!

2. Read the list of needed modules from the server and use LazyLoad in the maybe run phase of the app or even before angular.bootstrap. (I've done this already but since the $http request is being done async It works sometimes and it loads before angular compile and sometimes it doesn't)

I would appreciate it if you could help me with this.

spa.run(['$rootScope', '$location', '$route', '$localStore', '$templateCache', 'Analytics', 'preflightValue', '$ocLazyLoad', '$http',
'$compile', function($rootScope, $location, $route, $localStore, $templateCache, Analytics, preflightValue, $ocLazyLoad, $http, $compile ) {
    $rootScope.$on('cfpLoadingBar:completed', function(event, args) {
        angular.element($('body')).addClass('cfp-done');
    });

    $http({
        method: 'POST',
        url: url,
        data: {
            route: "/dashboard"
        },
        headers: {
            // My Headers
        }
    }).success(function (data, status, header, config) {
        var currentModules = $ocLazyLoad.getModules();
        for (var i = 0; i < data.data.cloudwares.length; i++) {
            var moduleName = data.data.cloudwares[i];
            if (currentModules.indexOf(moduleName) === -1 && moduleName !== 'bot-manager') {
                preflightValue.addModule(moduleName);
            }
        }
        $ocLazyLoad.load(preflightValue.modulesList()).then(function () {
            preflightValue.emptyList();
        });
    });
}]);

// Update

Please pay attention that we're not using ui-router or ngRouter. We're getting the state of our route from the server each time using $resource.

Answer 1

I Actually Solved this Issue by asking another question! All I had to do was to return two promises!

Find the solution Here: Use a $routeProvider resolve function inside another one