Whenever I insert this into my HTML, everything functions correctly:
<div ng-include="'my-template.html'"></div>
However, when attempting to dynamically create that ngInclude directive using jQuery (after the DOM has loaded), it fails to work:
$(function() {
var el = document.createElement('div');
el.setAttribute('ng-include', "'my-template.html'");
$('.container').replaceWith(el);
});
The element is indeed added to the DOM with the anticipated template, but it's not being recognized as AngularJS code. There are no errors in the console.
What could be the missing piece of the puzzle?