How to show HTML code using angular

Question

In one of my application I am using angularjs for internalization. I am having different json files from which i am getting texts as per the market. I am importing them into XML. Then in in jsp i am importing those XML to view.

The problem is if i am giving some HTML tag inside XML like

<sup>1</sup>

its working, but the same thing is not working if it passed from JSON. Please help.. thanks in advance

json is
"pwpDetail": "<sup>1</sup>

Controller -  
$http.get(languageFilePath2).success(function(data){
     $scope.datav=data;
 });

XML -

<description>{{datav.pwpDetail}}</description>

The print the HTML code as string not as a super script

Answer 1

¹ You just need to Decode the output to get back the original HTML.

Use javascript unescape function

Answer 2

I think that you would want this:

For Angular 1.3, use ng-bind-html in the HTML:

<div ng-bind-html-unsafe="datav.pwpDetail"></div>

And in the controller:

function htmlDecode(input){
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}  

$http.get(languageFilePath2).success(function(data){
     data.pwpDetail = htmlDecode(data.pwpDetail);
     $scope.datav=data;
 });