javascript - Access directive element from a controller -

on page have table custom directive shows row item's detailed view when user click on details button :

 <table ng-controller="mycontroller">       <tr ng-repeat="item in controller.items">         <td>{{item.name}}</td>         <td> <a href="#" ng-click="controller.loaddetails(item.id)">details</a>         </td>       </tr>       <tr ng-details details-colspan="2" ng-model="controller.details"></tr>  </table> 

directive:

.directive('ngdetails', function() {     return {         restrict: 'a',         require: "^ngmodel",         replace: true,         template: '<tr class="detailstemplate {{ngmodel.cssclass}}"> \                       <td colspan="{{detailscolspan}}" ng-bind-html="ngmodel.data"></td> \                     </tr>',         scope: {           detailscolspan: '@',           ngmodel: '='         }     } }); 

here's demo.

right item details section showing fine, it's @ bottom of table. move directive row element under corresponding item row, i'm not sure how access directive element inside of controller.

rather having details row appear once , moved around, let ng-repeat include every row. can using ng-repeat-start on first <tr> , ng-repeat-end on last <tr>. special syntax allows arbitrary sets of elements repeated without being contained in same repeating element. can include ng-hide, ng-show, or possibly ng-if on directive element displayed when appropriate row has been clicked.

more information ng-repeat-start/end syntax can found here.