Insert HTML into view using AngularJS



Example controller :

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';

Example view :

<div ng:bind="customHtml"></div>

Gives :

    "<ul><li>render me please</li></ul>"


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

instead of


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.directives', 'ngSanitize'])