How can I pass HTML Elements from Server to HTML Body in a widget?

[JDB]

I have a requirement that generates html elements from the server script (specifically from within a script include).

Specifically the html elements are formatted table row cells that are meant to be passed to the html body template after some information is selected within the widget. All of that seems to work fine but my problem is that when it gets added to the html it's being translated to show the actual tags instead of an actual html element. I'm wondering if there is something i need to do before i try and pass it back to the html body for reference i made a simplified example of what i see in my PDI:

HTML Body Template

<div>
<!-- your widget template -->
  <span id="test-span">
     {{c.data.something.test_data}}
  </span>
</div>

Client Script:

api.controller=function() {
  /* widget controller */
  var c = this;
	alert(c.data.something.test_data);
	
	c.updateItem = function (){
		console.log("updateItem");
		alert("triggered by button");
	}
	
};

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	data.something = {};
	
	
	data.something.test_data = "<h1>test something</h1>" + 
		"&lt;h1&gt;test something&lt;/h1&gt;" +
		"\<h1\>test something\<\/h1\>";

})();

Result:

[shloke04]

Agree . Did not notice completely he has written HTML Tags in Server script of his widget.

Need to use ng-bind-html here.

Thanks for pointing out.

Regadrs,

Shloke