AngularJS: how do I know when $ compilation ended?

Question

http://plnkr.co/edit/GRVZl35D1cuWz1kzXZfF?p=preview

In custom fancybox (aka lightbox, dialog), I display content with interpolated values.

in the service, in the "open" fancybox method, I do

 open: function(html, $scope) {
        var el = angular.element(html);
        $compile(el)($scope); // how to know when the $compile is over?
        $.fancybox.open(el); // the uncompiled is shown before the compiled
      }

The problem is that the contents in the dialog are loaded until the end of the compilation of $, so after less than a second I received an update to the contents of the dialog with the values.

Plunkr works, but I want to avoid that "el" is displayed before it is fully compiled: I want to show it only after the compilation has completed.

Is there any way to know when this value compiles, so I will only show the content on fancybox after that?

Answer 1

$scope , Singleton $scope.

, $compile(el)($scope); :

var compiledEl = $compile(el);
 ....

$compile .

. , .

Answer 2

ngDialog . . DOM.

$timeout, : http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

- :

open: function(html, $scope) {
    var el = angular.element(html);
    $compile(el)($scope);
    $timeout(function() {
        $.fancybox.open(el); 
    }, 0);
}