My web application built with AngularJS includes <p> tags. I am looking to apply a template from a server file to the innerHTML of these <p> tags. The template consists of simple text with various tags like <b>, <ol>, and other text formatting tags.
An example of my template:
Lorem <b>ipsum</b> dolor <i>sit</i> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
I fetch this content through ajax and attempt to apply the template to the inner HTML of the <p> tags:
<p>{{template}}<p>
In my controller:
// load the template here
...
// apply the template
$scope.template = template;
However, when viewed in the browser, I see the text with all its tags intact. For example, instead of seeing formatted text, I see:
Lorem <b>ipsum</b> dolor <i>sit</i> amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
I would like to display the formatted text without any tags. How can I achieve this?
Thank you.