Угловая директива transclude <tr> breaks layout

Question

Я пытаюсь перевести строку таблицы (a) в цикле ng-repeat, чтобы другая строка таблицы (b) отображалась/скрывалась, когда пользователь нажимает (a). Обе строки таблицы представляют собой рендеринг, однако элемент <ng-transclude> - необходимый для включения (a) перед (b) в шаблоне директивы разбивает макет. Как я могу использовать директиву для рендеринга двух строк таблицы, не нарушая макет?

// Главный шаблон

<tr id="a" campaign-item ng-if="vm.campaignData.length > 0" ng-repeat="campaign in vm.campaignData | orderBy:vm.sortBy:vm.sortReverse | filter:searchCampaigns track by $index" ng-click="vm.showCampaignPreview(campaign)"> 
    <td>{{ campaign.name }}</td> 
    <td>{{ campaign.priority }}</td> 
    <td>{{ campaign.status }}</td> 
    <td>{{ campaign.creator }}</td> 
    <td>{{ campaign.approver }}</td> 
    <td>{{ campaign.release_date }}</td> 
    <td>{{ campaign.expiration_date }}</td> 
    <td><select ng-init="campaignOptions = vm.campaignOptions[0]" name="campaignOption" class="form-control" ng-model="campaignOptions" ng-options="campaign.name for campaign in vm.campaignOptions track by campaign.value"></select></td> 
</tr> 

// директива

(function(){ 
'use strict'; 

angular.module('vsmsCampaignModule') 
.directive('campaignItem', campaign) 

    function campaign(){ 

     var directive = { 
      link: link, 
      restrict: 'EA', 
      transclude: true, 
      templateUrl: 'app/vsms/admin/campaign/campaign.tpl.html' 
     }; 

     return directive; 

     function link(scope, el, attr, ctrl, transclude) { 
      // do something with clone compiled and linked 
      // in child scope of directive's scope: 
     } 

    } 

})(); 

// директива шаблон

<ng-transclude></ng-transclude> 

<tr id="b"> 
    <td colspan="8">{{ campaign.description }}</td> 
    <td colspan="8"> 
     <div class="row"> 
      <div class="col-lg-1"> 
       <ul> 
        <li ng-repeat="package in campaign.packages"> 
         {{ package.name }} 
        </li> 
       </ul> 
      </div> 
      <div class="col-lg-1">{{ campaign.policy }}</div> 
      <div class="col-lg-1">{{ campaign.region }}</div> 
      <div class="col-lg-1"> 
       <ul> 
        <li ng-repeat="vehicle in campaign.vehicles"> 
         {{ vehicle.name }} 
        </li> 
       </ul> 
      </div> 
     </div> 
    </td> 
</tr> 

// обновление, я решил эту проблему, просто используя нг-повтор -старт/конец

<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-if="vm.campaignData.length > 0" ng-repeat-start="campaign in vm.campaignData | orderBy:vm.sortBy:vm.sortReverse | filter:searchCampaigns track by campaign.id" ng-click="vm.showCampaignPreview(campaign)"> 
    <td>{{ campaign.name }}</td> 
    <td>{{ campaign.priority }}</td> 
    <td>{{ campaign.status }}</td> 
    <td>{{ campaign.creator }}</td> 
    <td>{{ campaign.approver }}</td> 
    <td>{{ campaign.release_date }}</td> 
    <td>{{ campaign.expiration_date }}</td> 
    <td> 
     <select ng-init="campaignOptions = vm.campaignOptions[0]" name="campaignOption" class="form-control" ng-model="campaignOptions" ng-options="campaign.name for campaign in vm.campaignOptions track by campaign.value"> 
     </select> 
    </td> 
</tr> 
<tr class="campaign-preview" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat-end ng-show="vm.selectedCampaign == campaign.id"> 
    <td colspan="8">{{ campaign.description }}</td> 
</tr>