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:

[Sebastian L · Accepted solution]

You can use ng-bind-html:

Replace "{{c.data.something.test_data}}" with: 

<p ng-bind-html="data.something.test_data"></p>

Please mark helpful or mark as correct answer if applicable, thanks! 🙂  

[JDB]

This looks to be the behavior i'm after! I appreciate it everyone's insight and help! I'll mark this answer correct!

[shloke04]

Hi @JDB 

You just need to update your HTML Script as below:

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

You can pass data directly from Server to HTML, you do not need a Client controller transaction here.

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

[Sebastian L]

It is correct he does not need to do it, but there is nothing wrong with it. But your answer is  incorrect, and will not transform his html code in data.something.test_data, but will show it as a string (same as now). He needs to use ng-bind-html to transform the html tags written in the data object.