$compile not working after request?

Question

JavaScript

function getTemplate(conf) {

                var compileScope = $rootScope.$new();
                angular.extend(compileScope, conf);

                var element = $compile(angular.element(
                    '<div class="tooltip-chart">' +
                    '<p>{{from}} - {{to}}</p>' +
                    '<p ng-if="y">USD: <bold style="color: #000000">{{y}}</bold></p>' +
                    '<span ng-if="news">' +
                    '<hr>' +
                    '<p ng-repeat="item in news">{{item}}</p>' +
                    '<hr>' +
                    '<p>3 of {{length}}<a ui-sref="news">VIEW ALL</a></p>' +
                    '</span>' +
                    '</div>'
                ))(compileScope);

                compileScope.$apply();

                return element.html();
            }

From local data works. After the request for then, for some reason, it does not work and throws a trace at the moment compileScope.$apply();
What's the catch?

Answer 1

After the request for then, for some reason, it does not work and throws a trace at the moment compileScope.$apply();

Bring the trace, I'm 90% sure that you have an error like $digest already in progress.
This is probably the most rotten place in angular and I'm wildly glad that they got rid of it in the second. Before starting the $digest loop (which is what is called on $rootScope when you do apply), you should check if it's running. The $http service automatically starts $digest when the request completes, if anything.
The easiest way to protect yourself from this is to use the $timeout service, which wraps and handles the $digest loop itself.