Creating a dynamic nested hierarchy of tables is my current goal. I've been able to retrieve the data without any issues, but when using ng-repeat at each level, the parent table ends up inserting child data for a specific row into every row of the parent table. My aim is to prevent this from happening, and so far, I've experimented with using ng-repeat-start and ng-repeat-end. However, due to the nesting of tables, I'm unable to place the end tag in a suitable location to halt the repetition.

A recent update: To provide more clarity on the situation, I have 3 nested tables. The highest-level table contains a list of groups, with the first child table displaying all items belonging to a specific group in the parent table. Upon clicking the expand button, the child table gets populated based on which row was clicked in the parent table. This functionality works fine, yet the issue arises when the child table appears in every row of the parent table instead of just the selected row.

Visit this Plunker link for reference: http://plnkr.co/edit/RVOnf9wBF3TzXauzvMfF

HTML code snippet:

<table id="sicGroupTable" class="RadGrid_Metro">
   <thead>
       <tr>
          <td>Sic Code Group</td>
       </tr>
   </thead>
       <tbody ng-repeat="group in sicCodeGroup">
           <tr class="rgRow">
               <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(group.GroupId)" ng-model="hideTwoDigitSub" /></td>
               <td><input type="checkbox" ng-model="SelectGroup" /></td>
               <td>{{group.GroupName}}</td>
           </tr>
           <tr ng-hide="hideTwoDigitSub">
               <td></td>
               <td>
                   <table id="sic2DigitTable" class="RadGrid_Metro">
                       <thead>
                           <tr>
                               <th>2 digit sic Code</th>
                           </tr>
                       </thead>
                           <tbody>
                               <tr ng-repeat="twoDigitSic in twoDigitSicCodes" class="rgRow">
                                   <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(twoDigitSic.SicCode)" /></td>
                                   <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                   <td>{{twoDigitSic.SICCode2}} - {{twoDigitSic.Title}}</td>
                                </tr>
                                <tr>
                                <td></td>
                                 <td>
                                     <table id="sic4DigitTable" class="RadGrid_Metro">
                                         <thead>
                                             <tr>
                                                 <th>4 digit sic code</th>
                                             </tr>
                                         </thead>
                                             <tbody>
                                                 <tr class="rgRow">
                                                     <td class="rgExpandCol"><img class="rgExpand" ng-click="expandRow(sicCode.SicCode)" /></td>
                                                     <td><input type="checkbox" ng-model="Select2DigitSicCode" /></td>
                                                     <td>{{sicCode.SicCode}} - {{sicCode.Title}}</td>
                                                 </tr>
                                                 <tr>
                                                     <td></td>
                                                 </tr>
                                              </tbody>
                                          </table>
                                      </td>
                                  </tr>
                              </tbody>
                          </table>
                      </td>
                  </tr>
              </tbody>
          </table>

JavaScript snippet:

var app = angular.module("apptSetting", ['ngResource'])

app.factory('dataFactory',
    function ($resource) {
        return {
            getSicGroups: $resource('../Packages/GetJsonSicCodeGroups'),
            expandRow: $resource('../Packages/GetExpandedRowData')
        }
    });

app.controller('aPackageController', ['$scope', 'dataFactory', function ($scope,  dataFactory) {
function init() {
    $scope.hideTwoDigitSub = true;
    $scope.hideFourdigitsub = true;
}
$scope.sicCodeGroup = dataFactory.getSicGroups.query({}, isArray = true);
$scope.twoDigitSicCodes = null;
$scope.expandRow = function (groupId, sicCode) {
    if (groupId != undefined)
    {
        $scope.twoDigitSicCodes = dataFactory.expandRow.query({ GroupId: groupId }, isArray = true);
        $scope.hideTwoDigitSub = false;
        if (sicCode != null && sicCode != undefined && sicCode != "") {
            if (sicCode.length == 2) {
                $scope.hideTwoDigitSub = false;
                $scope.twoDigitSicCodes = dataFactory.Get2DigitSicCodes.query({ GroupId: groupId }, isArray = true);
            }
        }
    }     
}
    init();
}])