Rendering Angularjs Template from within controller -

suppose have following angularjs template

<script type="text/ng-template" id="tmp"> <li>     {{firstname}} {{lastname}}</li> </script> 

and have 2 textboxes , save button like

<input name="firstname" type="text"/> <input name="lastname" type="text"/> <button name="save" text="save"/> 

when user enters values in firstname , lastname textboxes , press on save button want these 2 values passed template , resultant html should appended existing ul. how can angular?

you create directive dynamically compile template , append ul when hits save button, that's whole purpose of ng-repeat.

here's how can work ng-repeat instead:

angular.module('main', []);    angular.module('main').controller('mainctrl', function ($scope) {  	$scope.names = [];      	$scope.save = function () {  		$scope.names.push({first: $scope.firstname, last: $scope.lastname});      }  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>    <div ng-app="main" ng-controller='mainctrl'>      <input name="firstname" type="text" ng-model='firstname'/>    <input name="lastname" type="text"ng-model='lastname'/>    <button name="save" text="save" ng-click='save()'>save</button>        <ul>    	<li ng-repeat='name in names'>{{name.first}}   {{name.last}}</li>    </ul>  </div>