Угловые вложенные таблицы данных с проблемой динамических заголовков

Я использую таблицы данных Angular в своем приложении и пытаюсь создать nested datatables с dynamic headers.

Вот мой HTML-код.

<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2"  dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
    <thead>
        <tr>
            <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
            <td ng-repeat="col in headerList2" ng-switch="col">
                <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                <span ng-switch-default>{{ client[col] }}</span>
            </td>
        </tr>
        <tr ng-show="showViewDetail">
           <div class="span12 pull-right" ng-show="showViewDetail">
               <table datatable="ng"  class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3"  dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
                  <thead>
                    <tr>
                      <th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                        <td ng-repeat="col3 in headerList3" ng-switch="col">
                            <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                            <span ng-switch-default>{{ client[col3] }}</span>
                        </td>
                    </tr>
                  </tbody>
               </table>
            </div>                            
        </tr>               
    </tbody>
</table>                

Вот код javascript

  function makeDetailTable(data) {          
        var header = data[0],
        dtColumns = [];
        $scope.headerList2 = [];
        var i = 0;
        var key = "";
        //create columns based on first row in Parent Datatable
        for (var key in header) {

             dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
             $scope.headerList2.push(key);
            i = i + 1;


        }

        $scope.dtColumnDefs2 = dtColumns;           

        $scope.dtOptions2 = DTOptionsBuilder.newOptions()            
                            .withPaginationType('full_numbers')           
                            .withButtons([
                                'excel',
                                    {
                                        text: 'Reset',
                                        action: function (e, dt, node, config) {
                                            $("#dtInvoicingData2").DataTable().search("").draw();
                                        }
                                    }
                                ]);
    }

    $scope.btnViewDetails_Click = function (rowIndex) { 
        var detailList = $scope.lstInvoiceDetail[rowIndex]['lstDetail'];            
        var header3 = detailList[0],
        dtColumns3 = [];
        $scope.headerList3 = [];
        var i = 0;
        var key = "";
        //create columns based on first row in child datatable
        for (var key in header3) {

             dtColumns3.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
             $scope.headerList3.push(key);
            i = i + 1;


        }

        $scope.dtColumnDefs3 = dtColumns3;
        $scope.dtInstance2 = null;
        $scope.dtOptions3 = DTOptionsBuilder.newOptions()   
            .withPaginationType('full_numbers')
            .withButtons([
                'excel',
                    {
                        text: 'Reset',
                        action: function (e, dt, node, config) {
                            $("#dtInvoicingData3").DataTable().search("").draw();
                        }
                    }
                ]);

        $scope.showViewDetail = true;

когда я пытаюсь добавить дочерний datatable, он не работает и показывает ошибку консоли

TypeError: невозможно установить свойство _DT_CellIndex неопределенного

Я искал эту ошибку, но не нашел правильного решения

Вот небольшая информация, связанная с этим ошибка

там написано что проблема

Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.

Обновление:

Теперь я пробую это.

 <table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2"  dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
                    <thead>
                        <tr>
                            <th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                             <td ng-repeat="col in headerList2" ng-switch="col">

                                <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
                                <span ng-switch-default>{{ client[col] }}</span>

                             </td>

                         </tr>
                         <tr>
                              <td colspan="3">
                              <table class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3"  dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
                                 <thead>
                                    <tr>
                                        <th ng-repeat="col3 in headerList3">{{col3 | translate}} </th>
                                    </tr>
                                </thead>
                                <tbody>
                                 <tr ng-repeat="(index,client) in lstChildInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
                                     <td ng-repeat="col3 in headerList3" ng-switch="col">

                                        <!-- <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span> -->
                                        <span ng-switch-default>{{ client[col3] }}</span>

                                     </td>
                                 </tr>
                                </tbody>
                             </table>
                          </td> 
                           <td style="display:none;"> </td>
                          <td style="display:none;"></td>
                          </tr>     
                    </tbody>
                 </table>   

Дочерняя таблица создается в первой строке, я хочу создать ее в каждой строке.

Вы имеете какое-нибудь представление об этом?