ng-repeat with the nested json array of objects in AngularJs

Question

I have a nested json array of objects as below. I wanted to parse so that I can read using ng-repeat and display in the html table. In the table, names will become headers and values become cells in each row. can you please help me as how to do this in angularjs ?

[
    {   
        "records": 
        [
            {
                "cells": [
                    {"id": "102", "value": "John"},
                    {"id": "101", "value": "222"},
                    {"id": "103", "value": "600987"}
                ]
            },
            {
                "cells": [
                    {"id": "103", "value": "69987"},
                    {"id": "101", "value": "999"},
                    {"id": "102", "value": "Susan"}
                ]
            }
        ],
        "headers": [
            {
                "id": "101",
                "name": "emp_id"
            },
            {
                "id": "102",
                "name": "emp_name"
            },
            {
                "id": "103",
                "name": "emp_salary"
            }
         ]
     } 
 ]

Answer 1

Here is your table should be like this:

<table>
  <tr>
    <th ng-repeat="h in list[0].headers">{{h.name}}</th>
  </tr>
  <tr ng-repeat="record in list[0].records">
    <th ng-repeat="cell in record.cells">{{cell.value}}</th>
  </tr>
</table>

See a working plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview

Update:

And you can use orderBy with ng-repeat as davidkonrad mentioned:

<table>
  <tr>
    <th ng-repeat="h in list[0].headers | orderBy: 'id'">{{h.name}}</th>
  </tr>
  <tr ng-repeat="record in list[0].records">
    <th ng-repeat="cell in record.cells | orderBy: 'id'">{{cell.value}}</th>
  </tr>
</table>

Answer 2

Adding something extra to Joe's answer. If you are planning to get the data from a separate JSON file, you can use the following code in your .js file.

(function () {
  'use strict';

  angular.module('plunker', [])
  .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope', '$http'];
  function MainCtrl($scope, $http) {
    $http.get('[path to your JSON file]/data.json').success(function (data) {
      $scope.list= data;
    });
  }
})();