Using HTML Entities within Angular strings

Question

Given a string in my $scope model which contains an HTML entity, how do I ensure that the entity is properly displayed as an HTML character rather than a literal string?

Answer 1

With $sce. You need to explicitely tell angular the content is html.

<div ng-controller="htmlChar" ng-bind-html="title"></div>

<script>

  angular.element(document).ready(function(){

    var app=angular.module("app",[]);
    app.controller("htmlChar",function($scope, $sce){
      $scope.title = $sce.trustAsHtml("&copy; Acme");
    });
    angular.bootstrap(document, ['app']);

  });

</script>

http://plnkr.co/edit/9iNnRC7AxFptnQZLPtYR?p=preview

Answer 2

You do not need $sce to bind to strings with html. All you need is to inject ngSanitize into your app (it is not a core module), and then use the ng-bind-html attribute directive.

JavaScript

var app = angular.module('app', ['ngSanitize']);

app.controller('MainCtrl', function($scope) {
    $scope.title = '&#189; Cookies &amp; <span class="cream">Cream</span>';
});

Html

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

Plunkr