Я хочу разобрать json в HTML таблицу с помощью angular js

---

У меня есть такой JSON.

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
 			}]
 		}]
 	}]

 }; 

Я использую цикл for для итерации этих данных в 10 таблицах на страницу.

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);
}

мой Html

Что я уже пробовал:

HTML-это как.

<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>

Я получаю значения в консоли, но не в таблице.Как можно показать данные в таблице

---