How to show Sublevel Array Using table element with AngularJS

I am beginner in AngularJS.

My Question is how to show Parent/Sub level Array Records in table format with expand/collapse functionality (child row should be displayed on expanding the parent row) with use of AngularJS.

I have done the static coding and it displays all the records by default expanded without using AngularJS as shown in below image.

I would like to display only parent records by default on page load and then if use expands any parent records (row) then only the child row should be expanded.

My Json is :

var jsondata = [
{
    itemName:"product1",
    orderNumber:123,
    orderDetails:[
        {
            itemName:"Sub Item 1",
            itemCode:"code1"
        },{
            itemName:"Sub Item 2",
            itemCode:"code2"
        }
    ]
},{
    itemName:"product2",
    orderNumber:1223,
    orderDetails:[
        {
            itemName:"Sub Item 3",
            itemCode:"code3"
        },{
            itemName:"Sub Item 4",
            itemCode:"code4"
        },{
            itemName:"Sub Item 1",
            itemCode:"code1"
        },{
            itemName:"Sub Item 6",
            itemCode:"code6"
        }
    ]
},{
    itemName:"product3",
    orderNumber:1123
}
];

Initially I wrote the following code, it is not working as per the expectations:

<table class="table">
  <thead>
    <tr class="table-blue-header">
      <th style="width:20px;"></th>
      <th><a href="javascript:;">Item Name</a></th>
      <th><a href="javascript:;">Order Number</a></th>
    </tr>
  </thead>
  <tr ng-repeat="LocalData in SearchOrdersData">
    <th style="width:20px;"><a ng-click="LocalData.visible = !LocalData.visible" href="javascript:;">&raquo;</a></th>
    <td>{{LocalData.itemName}}</td>
    <td>{{LocalData.orderNumber}}</td>
  </tr>
  <tr ng-if="LocalData.visible" ng-repeat="orderdetailsdata in data = (LocalData.orderDetails)">
    <td colspan=3><table class="table table-bordered">
        <thead>
          <tr class="table-blue-header">
            <td>Item Name</td>
            <td>Item Code</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-show="data.length">
            <td>{{orderdetailsdata.itemName}}</td>
            <td>{{orderdetailsdata.itemCode}}</td>
          </tr>
          <tr ng-hide="data.length">
            <td colspan="10">No Child records to display.</td>
          </tr>
        </tbody>
      </table></td>
  </tr>
</table>

Can any one help me on this?