How to display HTML from model as HTML, not plain text

Question

I'm learning Angular and making a todo app. Creating a todo uses a wysiwyg editor (textAngular). It looks like this:

This works properly and gets saved as html to ng-model named todo.description. But when displaying this todo, the html from the description is displayed as plain text. Like so:

The description is just bound to the model

<p class="text-muted">{{todo.description}}</p>

I think this can be done very simple but I didn't find a solution. I tried the xmp tag, but that's not what I'm looking for.

How can I make the description display HTML and not text?

Answer 1

<p class="text-muted" ng-bind-html="todo.description"></p>

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 2

you need to use $trustAsHTML filter of $sce (Strict contextual escaping)

Answer 3

You can use ngBindHtml to display your html code.

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

app.controller('myCtrl', ['$scope',
  function($scope) {
    $scope.html = '<b>Test</b><u>Test</u>&lt;HTML';
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <span ng-bind-html="html"></span>
</div>