Load AngularJS Template within page, dynamically

Question

I have a page containing 2 controllers: one which manages a list of so-called 'apps', and another that is to place the new Angular template into the innerHTML of its Div element.

<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>

I have tried using the standard {{expression}} bindings, but they do not work with html, I have also tried the ng-bind-html-unsafe directive (Binding the innerhtml to that of the App request's return) but controllers are not executed within this new code.

The problem seems to be that by using a Binding, Angular is not re-parsing the contents of the html in question to use it as an angular app. Any ideas of how to get it to parse dynamic content?

Answer 1

It appears that the $compile service, when fed the elements you wish to recompile along with your current scope, does what I was looking for.

Example from my source:

var appPane = $('#AppPane');//JQuery request for the app pane element.
appPane.html(data);//The dynamically loaded data
$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

This should help anyone experiencing my problem, I hope.