Angular.js compile all directives contained in a text

Question

My application is loading a bunch of text with $http into a <div>. Within that text there might be angular directives:

<div id="div1"> 
    blah blah 
    <my-directive attribute="123"> some text </my-directive> 
    blah blah
</div>

<my-directive> is included in the code of my application but it behaves as simple text. I understand it's normal since it would have to be compiled first. But I don't know how to do that easily (I can only think of parsing the text with regular expressions, compile the found directives one by one into new elements, and re-append the whole thing in the right order, which seems complicated).

What is the best way to compile all directives in div1 ?

Answer 1

From the angular documentation, ng-include "fetches, compiles and includes an external HTML fragment."

Here is a demo, using your example text.