Insert HTML into view using AngularJS

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:

1. include the angular-sanitize.min.js resource, i.e.:
   <script src="lib/angular/angular-sanitize.min.js"></script>
2. 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