How to bind inner html to angular1 elements with ng-bind attribute

Question

<div ng-bind="model">
  <div>inner html</div>
</div>

Does anyone know how to display the inner div? Seems the ng-bind directive will always rewrite div element.

Thanks in advance.

Answer 1

ng-bind will always print what is in the model. You can do the following thing:

<div>
    <div ng-bind="model"></div>
    <div>inner html</div>
</div>

Either you can do something like:

//JS
app.controller("nameController", function($sce) {
   model = $sce.trustAsHtml("<div>inner html</div>");
});

//HTML
<div ng-bind-html="model"></div>