angularjs string variable to html element

Question

AngularJS code:

$scope.checking="<div style="color:red;">check</div>";

HTML code:

{{checking}}

Result in HTML page in browser:

<div>check</div>

Now what I want is that the $scope.checking variable be parsed in HTML as if it's a tag I defined.

So the result in html page should be:

check

and the above should come in red color

Any way to do it? hopefully its simple... AngularJS experts please help!

i got the output but the string doesnt come in red! the style tag is ignored! how can i do it? do i use interpolate?

Did you declare ng-model="checking"? I am a little confused on what you are asking. — sebenalern
– sebenalern, Commented Apr 24, 2016 at 17:46
angularjs and evrything works fine...evrything is declared and angularjs perfectly.... — Clyde Dias
– Clyde Dias, Commented Apr 24, 2016 at 17:50
Perhaps you can post a line from your Code. This would be helpful. — Nico
– Nico, Commented Apr 24, 2016 at 17:51
Possible duplicate of Angular - Interpolate string with html — Oleg
– Oleg, Commented Apr 24, 2016 at 17:53
why would you do something like that with n number of ways available to counter anything as such? — Gandalf the White
– Gandalf the White, Commented Apr 24, 2016 at 17:56

Nico · Accepted Answer · 2016-04-24 17:56:49Z

1

Use ng-bind-html! Here is the docs-page for ng-bind-html. This will help you.

ng-bind-html will render your html-string in the browser. Perhaps you have to "trust" your html string like here: http://erikaugust.com/thoughts/ng-bind-html/

answered Apr 24, 2016 at 17:53

Nico

3264 silver badges19 bronze badges

1 Answer 1