Loading scripts dynamically and resolving view using promisses does break changing route

[honzajde]

View 'switch' does not happen. On mouse click it happens, although template displays twice (one is not compiled).

 $routeProvider.when('/pricing', {
     templateUrl:'partials/pricing.html', 
     controller: 'PricesCtrl', 
     resolve: {
          'pricings': window.XYZ.utils.resolveJSONP(
               'http://someaddress/latest/pricing.js', 'CALLBACK_PRICINGS')
});

...

            window.XYZ.utils.resolveJSONP = function(url, callbackName){
                return function($resource, $q, $timeout){
                    var deferred = $q.defer();

                    window[callbackName] = function(data){
                        // this gets printed, but view does not switch
                        console.debug('resolved: '+url); 
                        deferred.resolve(data);
                    };

                    (function() {
                        var script = document.createElement('script'); 
                        script.type = 'text/javascript'; script.async = true;
                        script.src = url;
                        var s = document.getElementsByTagName('script')[0];
                        s.parentNode.insertBefore(script, s);
                    })();

                    return deferred.promise;
                };
            };

Is this because $q or loading templates collides with custom script loading? How to avoid this problem? I can not do regulat JSONP with variable callback name, since the point of what I am doing is to load a static resource.

Thanks anyone for helping.

[honzajde]

using 1.1.5, the same on 1.1.4

[honzajde]

But the view (pricings) is switched to when I click on the button on the view from that it is switching...looks like $apply call is missing.

[pkozlowski-opensource]

@honzajde this seems to be a general question about AngularJS usage and as such would be better asked using one of those channels:

• mailing list (angular@googlegroups.com)
• StackOverflow (http://stackoverflow.com/questions/tagged/angularjs)
• IRC (http://webchat.freenode.net/?channels=angularjs&uio=d4)
• Google+ community (https://plus.google.com/u/0/communities/115368820700870330756)

We want to keep GitHub issues for bug reports and feature requests so closing this one for now. Please re-open with a clear reproduce scenario if you still believe that there is a bug in AngularJS.

[honzajde]

@pkozlowski-opensource Can u at least give me a hint of what is going on? Of course I searched elsewhere, haven't found anything close to my issue. I've been using angular almost half year. Thanks.

[honzajde]

@pkozlowski-opensource I created plunks to demonstrate the issue.

1. Run plunk
2. click link 'change view'
3. see console - success: 'ChangeViewController loaded ---------' will appear, fail: this will not appear

The problem is that the view does not get changed. This happens only when at least two controller dependencies are resolved as promisses via script loading.

This one demostrates the issue: http://plnkr.co/edit/wthRp0WQ80lFdRrHyzPQ
This one has commented out one promise and works: http://plnkr.co/edit/9bhFDIqMbpCu1iyF6NNl
This one has commented out another promise and works: http://plnkr.co/edit/5rwp9lzvrpvPvWA6o70j

[honzajde]

After some week I found out, that this issue is maybe related to #2942, hwoever I am encountering it on Chrome.

As mentioned under the issue 2942, wrapping resolve() into $rootScope.$apply() appears to solve the problem:

    $rootScope.$apply(function(){ 
        deferred.resolve(data);
    });