Angular filter return html


I want to use unsafe-html in angularjs 1.2. Whereas the filter without html does work, with html it does not. What I do:

I added angular-sanitize to my html head:

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>

My angular module:

var myApp = angular.module('myApp', ['ngSanitize'])
    .filter('convertState', function ($sce) {
        return function (state) {
            if (state == 1) {
                return $sce.trustAsHtml("<strong>" + state + "</strong> special state");
            else {
                return $sce.trustAsHtml("<strong>"+state + "</strong> normal state");

My Html:

<td><span ng-bind-html="f.state | convertstate"></span></td>

edit: updated ng-bind-html-unsafe to ng-bind-html

Problem courtesy of: daniel


ng-bind-html-unsafe has been removed in Angular 1.2. Since you are correctly sanitizing your input, you should just use ng-bind-html.


Solution courtesy of: musically_ut


You could use something like

app.directive('toHtml', function() {
  return {
    restrict: 'A',
    link: function (scope, el, attrs) {

Use as:

<p to-html="name | convertState"></p>

Discussion courtesy of: Mwayi

This recipe can be found in it's original form on Stack Over Flow.