use ng-repeat-start and ng-repeat end directive to implement Master Detail relationship in AngularJS

if it is quite easy to populate the data in the table with ng-repeat directive

we can set the ng-repeat directive in the table row as following

 <table ng-hide="isInit" class="table" ng-cloak>
            <thead style="background-color: lightgray;">
                <tr>
                    <td style="width: 30px;"></td>
                   <td>Title</td>
                    <td>FirstName</td>
                    <td>MiddleName</td>
                    <td>LastName</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="customer in customers">
                    <td>
                <input type="text" ng-model="customer.title">{{customer.title}</input>                  
                    </td>
                    <td>
                        <input type="text" ng-model="customer.firstName" ng-hide="true" />                     
                    </td>
                    <td><input type="text" ng-model="customer.middleName" class="hidden">{{customer.middleName}}</input></td>
                    <td><input type="text" ng-model="customer.lastName" class="hidden">{{customer.lastName}}</input></td>
               </tr> </table>

if we use to have the row as master record, then following with all secondary records, then we will use the  ng-repeat-start and ng-repeat-end attribute to set starting row and ending row. since The ng-repeat-start directive works the same as ng-repeat, the only diffierence is that it will repeat all the HTML code (including the defined tag) up to and including the ending HTML tag where ng-repeat-end is placed. in my case, i placed the ng-repeat-end directive in the detail table row start tag.

 <table ng-hide="isInit" class="table" ng-cloak>
            <thead style="background-color: lightgray;">
                <tr>
                    <td style="width: 30px;"></td>
                   <td>Title</td>
                    <td>FirstName</td>
                    <td>MiddleName</td>
                    <td>LastName</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat-start="customer in customers">
                    <td>
                <input type="text" ng-model="customer.title">{{customer.title}</input>                  
                    </td>
                    <td>
                        <input type="text" ng-model="customer.firstName" ng-hide="true" />                     
                    </td>
                    <td><input type="text" ng-model="customer.middleName" class="hidden">{{customer.middleName}}</input></td>
                    <td><input type="text" ng-model="customer.lastName" class="hidden">{{customer.lastName}}</input></td>
             </tr>
                <tr ng-if="customer.expanded" ng-repeat-end="" ng-repeat-start="slaveCustomer in customer.slaveCustomerList">
             <td>{{slaveCustomer.title}}</td>
             <td>{{slaveCustomer.firstName}}</td>
             <td>{{slaveCustomer.middleName}}</td>
             <td>{{slaveCustomer.lastName}}</td></tr>
 <tr ng-repeat-end ng-hide="true"></tr>
</table>

after i group those together, i will get the expand detail row on the click