Creating dynamic table based on nested JSON using AngularJS ng-repeat

Question

I have nested JSON like below.

{
  "Group": [
    {
      "Module1": [
        {
          "Col1": "Value1 0",
          "Col2": "Value2 0",
          "Col3": "Value3 0",
          "Col4": "Value4 0"
        },
        {
          "Col1": "Value1 1",
          "Col2": "Value2 1",
          "Col3": "Value3 1",
          "Col4": "Value4 1"
        },
        {
          "Col1": "Value1 2",
          "Col2": "Value2 2",
          "Col3": "Value3 2",
          "Col4": "Value4 2"
        }
      ]
    },
    {
      "Module2": [
        {
          "Col1": "Value1 0",
          "Col2": "Value2 0",
          "Col3": "Value3 0",
          "Col4": "Value4 0",
          "Col5": "Value5 0",
          "Col6": "Value6 0"
        },
        {
          "Col1": "Value1 1",
          "Col2": "Value2 1",
          "Col3": "Value3 1",
          "Col4": "Value4 1",
          "Col5": "Value5 1",
          "Col6": "Value6 1"
        },
        {
          "Col1": "Value1 2",
          "Col2": "Value2 2",
          "Col3": "Value3 2",
          "Col4": "Value4 2",
          "Col5": "Value5 2",
          "Col6": "Value6 2"
        },
        {
          "Col1": "Value1 3",
          "Col2": "Value2 3",
          "Col3": "Value3 3",
          "Col4": "Value4 3",
          "Col5": "Value5 3",
          "Col6": "Value6 3"
        }
      ]
    }
  ]
}

I will be having two tabs Module1 and Module2 When user selects Module1 then Module1 related data has to be utilised to create a table like shown below.

=============================================
|  Col1    |   Col2   |   Col3   |   Col4   |
=============================================
| Value1 0 | Value2 0 | Value3 0 | Value4 0 |
| Value1 1 | Value2 1 | Value3 1 | Value4 1 |
| Value1 2 | Value2 2 | Value3 2 | Value4 2 |
=============================================

Note that table columns are dynamic. There wont be same number of columns for all Modules and I won't be knowing what column name I will get as response.

Please help me creating a table. I tried using ng-repeat but I'm getting only last data when I select Module1

"Col4": "Value4 2"

Update :

---

Check Plunker

http://plnkr.co/edit/K77lRZOS2RuF4X8orzTk?p=preview

Answer 1

Update:

<table class="table" ng-repeat="(moduleName, dataset) in myJson.group">
    <thead>
        <tr>
            <th ng-repeat="(colName, colValue) in dataset[0]" ng-bind="colName"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="dataObj in dataset">
            <td ng-repeat="(colName, colValue) in dataObj" ng-bind="colValue"></td>
        </tr>
    </tbody>
</table>

This should be a shot in the right direction.

---

Having a large dataset with eg. ng-repeat is a big performance bottleneck due to all the $$watchers you create, I would advise using a grid plugin which does virtualization such as uiGrid.