angularjsng-bind-htmlng-bind

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

<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.

Solution

  • 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>