View from multiple partials (loaded dynamically) in angular.js

Question

I would like to create a view consisting of multiple partials which would be loaded dynamically depending on content type. I am new to angular.js, and the only idea I have is to do it like that in controller:

$(elem).html(string_with_src);
$compile(elem.contents())($scope);

...and it works. The thing is I wanted to put the source of partials in separate files and load them through jquery:

$.get(source.html, function( data ) {
  elem.html( data );
  $compile(elem.contents())($scope);
});

but this doesn't work. The template is not compiled by angular.js. Could someone explain to me why it doesn't work or how to do it better?

Answer 1

DON'T use jQuery for this.

Angular provides a directive to load partials: ng-include :

<div ng-include="'/path/to/partial.html'"></div>

(notice the double quotes "' when passing a static string)

You could also use a dynamic path:

$scope.pathToPartial = "/path/to/partial/" + partialName + ".html";

<div ng-include="pathToPartial"></div>