Problem:
Example controller :
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
Example view :
<div ng:bind="customHtml"></div>
Gives :
<div>
"<ul><li>render me please</li></ul>"
</div>
Solution:
<div ng-bind-html="expression"></div>
instead of
<div>{{expression}}</div>
This now requires the “ngSanitize” module (I got hung up on this for awhile and couldn’t figure out why it wasn’t working – and the documentation doesn’t seem clear on how to include this module). There’s 2 steps:
- include the angular-sanitize.min.js resource, i.e.:
<script src="lib/angular/angular-sanitize.min.js"></script>
- In a js file (controller or usually app.js), include ngSanitize, i.e.:
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])
from:
http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs