Using AngularJS, how do I append a directive to an element? -

i'm new angular , trying understand how dynamically create new elements. have element directive called "pane" replaces pane tag template.

<pane ng-controller="areactrl"></pane> 

template pane (condensed):

<div>     <section></section>     <div class="subs"></div> </div> 

when click on item inside section tag, want append "pane" inside div class="subs" if "pane" item clicked doesn't exist. can't appended pane tag invoke directive , replaced template. point in right direction great angular newbie.

here simple jsfiddle: http://jsfiddle.net/n9vxz/1/

you want array in model, ng-repeat directive:

  <div>     <a href="#" ng-click="additem()">add item</a>     <section></section>     <div class="subs">       <pane ng-repeat="item in list"></pane>     </div>   </div> 

js:

app.controller("areactrl", function($scope){   $scope.items = [{ name: 'item1' }];   $scope.additem = function(){     $scope.items.push({ name: 'newitem' });   }; });