AngularJS remove directive tag from dom by adding content

I had been looking for a way to remove the Domain Specific Language (DSL) tag that we create through AngularJS directive, most of the documentation talks about transclude and all but none highlight the replacing tag with inner cotent

Lets talk about the example below:

The directive tags will be replaced by their respective template content instead of being added inside the directive tags.

Update: make sure you add one root element to your template content (for example using div. <div> Hello from directive 2</div>) if you don’t it will give error
Template for directive must have exactly one root element.