Bind new html to controller after calling trustAsHtml Angularjs

Question

I\'m able to embed the new html once received from the server but later I need to bind it to the model. Even when I compile it 5 seconds after it\'s inserted and displayed the h

Answer 1

I was same problem and i make angular directive which will rerender html content. The code of directive is as follows.

Directive:

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
            console.log("in directive");
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };

}]);

HTML:

<div bind-unsafe-html="form">//your scope data variable which wil assign inn controller
</div>

Dont forgot to import directive where you config your angularJs project.Hope this will help you.

Answer 2

Take a look at the answer to this related question, which describes using a directive to compile the template:

It's a bit tricky because ng-bind-html will simply insert plain old html and not bother compiling it (so any directives in the html will not be processed by angular.

Here's a demo, incorporating the suggested technique with your code.