AngularJS : Render HTML in $scope variable in view

Question

I have a $scope variable like so:

$scope.example = "<h1>Hello</h1>"

When I output this in my view {{example}}, I want the HTML rendered. At the moment it outputs:

<h1>Hello</h1>

rather than

Hello

Is what I am trying to achieve possible?

score 33 · Answer 1 · edited May 23 '17 at 11:47

33

It should be

$scope.html = "<h1>Hello</h1>";

and

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

edited May 23 '17 at 11:47

Community

answered May 08 '14 at 17:11

user1415567

1

It is nice that you don't do the DOM manipulation like this but the above was answer to the question being asked. – user1415567 May 09 '14 at 15:15
3

You shouldn't put kerosene in your gas tank either but nothing is stopping you. If you want to do Angular you should do it correctly. Junk code leads to junk products. – mortsahl May 09 '14 at 16:37
2

What if you get a HTML-formatted blog article from a remote server where you cannot predefine any scopes? for me this solution worked:
– redestructa Jul 07 '16 at 11:07
@redestructa spot on. – Nathan Jul 19 '16 at 08:07
A bit outdated yet, but more info is given at your link. Thanks. – zygimantus Jun 14 '17 at 20:10