Combining ng-repeat and ng-bind-html?

Question

I've got a list of messages of which the text includes some html which I want to display. So as suggested here and here what I'm currently trying is this:

<div ng-repeat="message in messages">
    {{ message.sender_name }} - <div ng-bind-html="message.text"></div>
</div>

It displays the message.sender_name, but not the message.text. When I simply do {{ message.text }} it displays the text correctly (but displaying the raw <br>s without rendering them).

Does anybody know why this is not working?

Have you included [ngSanitize](https://docs.angularjs.org/api/ngSanitize) in your module? You need ngSanitize for ng-bind-html to work. — PSL, Dec 10 '14 at 18:38
Include/download http://ajax.googleapis.com/ajax/libs/angularjs/1.X.Y/angular-sanitize.js and list ngSanitize as dependency in your module declaration. Ex:- `angular.module('myapp', ['ngSanitize', ..deps])` — PSL, Dec 10 '14 at 18:47
@PSL - Awesome! that was it! If you add your comment as an answer I can accept it! — kramer65, Dec 10 '14 at 18:53

score 2 · Accepted Answer · answered Dec 10 '14 at 18:58

ngBindHtml directive needs $sce service to parse and display the bound html. So you would need to include ngSanitize module in your module decalaration as a dependency for ng-bind-html to work.

You can download appropriate version of it from :- http://ajax.googleapis.com/ajax/libs/angularjs/1.X.Y/angular-sanitize.js

Ex:-

angular.module('myApp', ['ngSanitize', ..otherdeps]);

score 1 · Answer 2 · answered Dec 10 '14 at 20:26

ng-bind-html Evaluates the expression and inserts the resulting HTML into the element in a secure way. By default, the resulting HTML content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application. By the way this is the description from angular js documentation. You can also see examples of using angular-sanitize with ng-bind-html there.

Good luck.

Combining ng-repeat and ng-bind-html?

2 Answers2