<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script><link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-init='Packages = [{ "id":1,"name":"Groceries","price":"0","total":"20","parentFlag":"true","parentId":"",childItems :[{"name":"GroceriesChild1","price":"15"},{"name":"GroceriesChild2","price":"5"}] },{ "id":1,"name":"Groceries","price":"0","total":"20","parentFlag":"true","parentId":"",childItems :[{"name":"GroceriesChild1","price":"15"},{"name":"GroceriesChild2","price":"5"}] }]'>
<table class="table">
<thead>
<tr>
<th>Package</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start='Package in Packages'>
<!-- take a look to ng-repeat-start -->
<td>
<button ng-click="viewChilds= !viewChilds">+</button>{{Package.name}}</td>
<td>{{Package.total}}</td>
</tr>
<tr>
<!-- this is repeated for package-->
<td colspan='2' ng-class="viewChilds? '' : 'hide'">
<!-- viewChilds controls the collapse () -->
<table class="subTable">
<!-- make some ident in subTable style -->
<tbody>
<tr ng-repeat='chilItem in Package.childItems'>
<!-- a nested repeat for each children -->
<td>{{chilItem.name}}</td>
<td>{{chilItem.price}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr ng-repeat-end></tr>
<!-- this is repeated also (if you need) -->
</tbody>
</table>
</body>
</html>
// Code goes here
/* Styles go here */
.hide {display: none;}