How to modify innerHTML by evaluating an angular expression

Question

I am trying to do something like this

<div id="{{item.id}}" ng-repeat="item in itemList">
    {{item.innerHTML}}
</div>

item.innerHTML contains the html that needs to go there, but since it is part of the dom, it is replaced as a string. Is there a way to just have it replace the innerHTML?

Thanks!

Answer 1

You need to use ngBindHtml :

http://plnkr.co/edit/n1rLzgEZQoa2tJf0qnVZ?p=preview

in the controller :

$scope.content = "<b>this is bold content</b>";

html :

<div ng-bind-html="content"></div>

you'll need the following module :

http://code.angularjs.org/1.0.3/angular-sanitize.js

Be sure to declare ngSanitize as a module dependancy, for instance :

var app = angular.module('angularjs-starter', ["ngSanitize"]);