How to display   or any raw html in angular data?

Question

How can I display   as space not as string. Is there raw filter like in twig?

<div>{{item}}</div>  $scope.item = '&nbsp;'; 

But the result is escaped  . I need this because ' ' have height of 0.

Answer 1

It can be easily done by using ngBindHtml

For Angular above 1.2.x version:

use ng-bind-html

Working Demo

html

<div ng-app='myApp' ng-controller="Controller">    <div ng-bind-html="item"></div> </div> 

script

var app = angular.module('myApp', ['ngSanitize']); app.controller('Controller', function ($scope, $sce) {    $scope.item = 'What Is Your Name?'; }); 

---

For Angular 1.0.x version:

Working Demo

use ng-bind-html-unsafe

html

<div ng-app='myApp' ng-controller="Controller">    <div ng-bind-html-unsafe="item"></div> </div> 

script

var app = angular.module('myApp', []); app.controller('Controller', function ($scope) {    $scope.item = 'What Is Your Name?'; }); 

Answer 2

For Angular 1.3.x version:

Use the $sce service to mark the string as safe to use in a specific context (HTML in this case).
See the documentation here

HTML code:

<div ng-app='myApp' ng-controller="Controller">    <div ng-bind-html="item"></div> </div> 

JS code (controller):

var app = angular.module('myApp', []); app.controller('Controller', function ($scope, $sce) {    $scope.item = $sce.trustAsHtml('<span>Some HTML code</span>'); });