Javascript - Execute HTML/Angular ng-include

Question

I'm using AngularJS to design a small app for searching. I have a div that's currently empty, and after running a function, for it to replace it with a div that has ng-include. The div replaces just fine, but ng-include doesn't load up.

I'm currently running the following in console for testing to see get it running. How would I go about getting this to work? Any help is appreciated!

document.getElementById("resultsDiv").innerHTML = '<div ng-include="" src=" \'sr.html\' "></div>';

Answer 1

read about angularjs $compile function

Answer 2

I don't know why you need to make this JavaScript-call, but its definitely no the 'angular-way'. If you need to conditionally include html, i would recommend using ng-if, ng-hide, ng-show or even ng-switch.

You could do something like this:

// somewhere in your controller 
$scope.triggerSomeInclude = true;

// in your template
<div ng-if="triggerSomeInclude">
    <div ng-include ="'someFile.html'"></div>
</div>

Another approach would be using a directive. They are the only place, where selecting an element directly could make sense (although even there it usually doesn't to select an element via id). But as I said, it's hard to stay what the best method would be, as I'm not sure what you're trying to achieve.

Although you're not using jQuery, what you're trying to do looks very jQueryesque (awful word) as you're selecting an element directly seemingly totally detached from the $digest and $compile-cycles of angular, so I also would recommend to read this answer: "Thinking in AngularJS" if I have a jQuery background?