How to replace a html content with jsf reRender or ajax load, and rebind the new DOM with AngularJS?

Question

Consider a bit of code:

<div id="dest">
  <p>Original Content</p>
  <p>Some data</p>
  <ul>
    <li ng-repeat="i in items">{{i.name}}</li>
  </ul>
</div>

or, using jsf, a panel:

<h:panelGroup id="dest">

Angularjs will understand the directive ng-repeat, and then, it will replaces the tag <li> by items list.

But, if your html has changed, by an ajax load, or by a jsf reRender, the new content doesn't will be recognized by AngularJS:

$('#dest').load('replace.html');

Answer 1

We need to compile and apply the AngularJS scope for the new DOM:

On controller, create a function to compile a new html, and bind to same scope:

$scope.compileDOM = function($el) {
    ($compile($el))($scope);
    $scope.$apply();
};

And, after load, call it:

$('#dest').load('replace.html', function() {
    $dest.scope().compileDOM($dest);
});

Look to the function .scope(). It allows to find a correct AngularJS scope for a HTML element. It doesn't need to point directly to element with ng-controller, any element under the ng-controller can be used.

Plunker sample: PLUNKER