I want to parse json to HTML table using angular js

See more:

HTML

JSON

AngularJs

I Have JSON like This.

var records =  {
 	"grid": [{
 		"rows": [{

 			"id": 204,
      "Status":1,
 			"firstName": "Harsh",
 			"lastName": "Borde",
 			"servername": "aa",
 			"orderNumber": 185,
 			"locationName": null,
 			"orderDetailItems": [{
 				"id": 506,
 				"itemsQty": 1,
 				"itemsShortName": "peg",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1

 			}, {
 				"id": 507,
 				"itemsQty": 1.00000,
 				"itemsShortName": "pepsi",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1

 			}, {
 				"id": 511,
 				"itemsQty": 1,
 				"itemsShortName": "Glenlevit",
 				"pointOfServiceNum": 1,
 				"orderHeaderId": 1
 			}]
 		}]
 	}]

 }; 

I use for loop for iterate this data in 10 table per page.

var arr = [];
 for(var i=0;i<10;i++)
 {
 arr.push(records);
 }

$scope.records=arr;
for(var j=0;j<10;j++)
{
 console.log(j);
 console.log(arr[j].grid[0].rows[0].orderDetailItems[1].id);
 //console.log(arr[0].grid);
}

my Html

What I have tried:

The HTML is like.

<div class="col-sm-6 col-md-4 col-lg-2">
    <table class="table" cellspacing="0" cellpadding="0">
        <tbody>
            <tr class="loc" colspan="2">
                <td style="text-align: center">{{ row.Location }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 50%">Order No.: {{ row.orderNumber }} </td>
                <td style="text-align: right; width: 50%; padding-right: 21px"> Guest: {{ row.pointOfServiceNum }}</td>
            </tr>
            <tr class="loc" colspan="2">
                <td style="text-align: left; width: 55%">Table No.: {{ row.locationName }}</td>
                <td style="text-align: right; width: 45%; padding-right: 0px">Server: {{ row.serverName }}</td>
            </tr>
            <tr class="heading" style="float: initial"><th>Qty.            Item Name</th></tr>
            <tr class="rowRecord"><td style="width: 0%">{{ row.itemsQty }} </td><td style="width: 74%">{{ row.itemsShortName}}</td></tr>
        </tbody>
        <tfoot>
            <tr>
                <td>{{ row.firstName }}  {{ row.lastName}}</td>
            </tr>
        </tfoot>
    </table>
</div>

I am getting values in console but not in table.How is it possible to show data in table