angularjs - Append new element after element clicked with html template -

i have ng-click function appends new <tr> 1 clicked

function expandtransactiondetail($event) {     var row = angular.element($event.currenttarget);     row.after('<tr><td>holla!</td></tr>'); } 

this html test. html become more complex. derive html template file. need make use of $compile feature in angularjs? nginclude?

what really want create directive in can have own template, scope , more fun stuff:

var myapp = angular.module('myapp', []);    myapp.directive('mydirective', function() {      return {          restrict: 'e',          scope: {              data: '=mydata'          },          link: function(scope, elem, attrs) {              elem.on('click', function() {                  elem.append(scope.data);              });          }      };  });    myapp.controller('myctrl', function($scope) {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>    <div ng-app="myapp" ng-controller="myctrl">      <my-directive my-data="'well done!'">click me append string!</my-directive>  </div>