How to wait till the end of $compile in angularJS

Question

I'm loading a template and then compiling it against my scope using $compile service.

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope);

and then using it in a popover

cellElement.popover({
    html: true,
    placement: "bottom",
    trigger: "manual",
    content: compiled
});

My template is quite complex and may take some time to compile.

How can I make sure that angular has finished compiling the template before using it in the popover ?

Edit: I tried to force angular to $apply() before creating the popover, it does work but generate javascript errors which is not acceptable for me.

Answer 1

$compile allows you to use what is called a clone attach function which allows you to attach your elements to the document. Here is an example you may be able to use:

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope, function (clonedElement) {
  cellElement.popover({
    html: true,
    placement: "bottom",
    trigger: "manual",
    content: clonedElement
  });
});

Reference to Angular documentation about $compile usage

Answer 2

In these cases you probably would like to use $timeout to fix the issue.

Something like this:

var template = "<div> .. {{someCompilingStuff}} ..</div>";
var compiled = $compile(template)(cellScope);
cellElement.popover({
   html: true,
   placement: "bottom",
   trigger: "manual",
   content: compiled
 });

$timeout(function(){
    cellElement.popover("show");
}, 0);

Here's an example JSFIDDLE I've created for you. Look how I show & hide the popover using $timeout.