on click add an element to next node Angularjs
<p>Hi I had started learning AngularJS a month ago, I wonder how could we add an angular directive to an element on click(ngClick/customClick). </p>

<pre><code>&lt;button type="button" ng-click="change()"&gt;
change this
&lt;/button&gt;
&lt;div class="container" ng-bind-html="element"&gt;
&lt;ul&gt;
  &lt;li&gt;John&lt;/li&gt;
  &lt;li&gt;Joe&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;script type="text/ng-template"&gt;
  &lt;ul&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;/script&gt;

var app = angular.module('app',[]);
app.controller('ctrl',function($scope){
    $scope.contents = ['Jack','Jenifer'];
  $scope.tmpl = "template.html";
  $scope.change = function(){
     $scope.element= "&lt;ng-include src=\"tmpl\"&gt;&lt;/ng-include&gt;";
  }
});
</code></pre>

<p><a href="http://jsfiddle.net/dmeLtepf/2/" rel="nofollow">http://jsfiddle.net/dmeLtepf/2/</a>
I am actually looking something similar to this.. on click I should replace the existing list in the container. Thank you :)</p>