I'm working with a simple piece of code that swaps out the ng-include tag with a template based on the button clicked. You can check it out on this Plunker.
<button ng-click="template='page1'">Show Page 1 Content</button>
<button ng-click="template='page2'">Show Page 2 Content</button>
<ng-include src="template"></ng-include>
<script type="text/ng-template" id="page1">
<h1 style="color: blue;">This is the page 1 content</h1>
</script>
<script type="text/ng-template" id="page2">
<div id="testanglr" ng-controller="PhoneListCtrl">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</script>
My goal is to achieve the same functionality as the "Show Page 2 Content" button but using a JavaScript function instead of Angular's HTML helper tag. In the linked Plunker, I want the third button to behave just like the second one, but this action should be triggered within the onClickHandler function rather than an alert.