Displaying a table with dynamic headers

Question

I need to display a table with dynamic headers, I mean that I do not want to do something like this in HTML

    <table>
        <tr>
            // THIS TABLE ROW IS WHAT I SAY
            <th>here info</th>
            <th>something here</th>
            <th>another header</th>
        </tr>
        <tr ng-repeat="thing in things">
            <td>{{thing.asfs}}</td>
            <td>{{thing.asx}}</td>
            <td>{{person.dsf}}</td>
        </tr>
    </table>

I need something like this

<table>
    <tr ng-repeat="head in heads">
        {{head}}
    </tr>
    <tr ng-repeat="bar in bars">
        <td ng-repeat="foo in foos"></td>
    </tr>
</table>

this is just an example, i need to do this using this data:

{
   "55f6de98f0a50c25f7be4db0":{
      "clicks":{
         "total":144,
         "real":1
      },
      "conversions":{
         "total":4,
         "amount":229
      },
      "cost":{
         "cpc":0.1999999999999995,
         "ecpc":1145.0000000000027,
         "total":28.79999999999993
      },
      "revenue":{
         "total":4,
         "epc":0.027777777777777776
      },
      "net":{
         "roi":-1.1612903225806457,
         "total":4
      },
     "name":"Traffic Source #2",
   },       
   "55f6de98f0a50c25f7be4dbOTHER":{
      "clicks":{
         "total":144,
         "real":1
      },
      "conversions":{
         "total":4,
         "amount":229
      },
      "cost":{
         "cpc":0.1999999999999995,
         "ecpc":1145.0000000000027,
         "total":28.79999999999993
      },
      "revenue":{
         "total":4,
         "epc":0.027777777777777776
      },
      "net":{
         "roi":-1.1612903225806457,
         "total":4
      }
     "name":"Traffic Source #3"
   },

}

every key, such as clicks, conversions, cost, etc., should be td, I just don’t want static HTML.

Any suggestions?

EDIT

And also, sometimes this object will grow, several more keys such as this one may appear. 55f6de98f0a50c25f7be4db0

I made this fiddle with the same data that I get

http://jsfiddle.net/wLkz45qj/

Answer 1

UPDATE:   , , ..

{
 a: {
   b:{ 
     c: 'x'
   }
 }
} 

[[ a, {  'b.c' : 'x' }], ...]

[{ _id : a , 'b.c' :'x'}, ...]

- lodash ( , flatMap, ..)

@jperezov , :

 $scope.peopleKeys = Object.keys(people[0]) 

 <table>
   <tr>
    <th></th>
    <th ng-repeat="personKey in peopleKeys">
       {{ personKey }}
    </th>
   </tr>

   <tr ng-repeat='p in people'>
      <th>{{ $index }}</th>
      <td ng-repeat="personKey in peopleKeys">
       {{ p[personKey] }}
      </td>
   </tr>

 </table>

:

$scope.displayNames = {
  id: 'ID',
  firstName: 'First Name'

...

}

:

   <tr>
    <th></th>
    <th ng-repeat="personKey in peopleKeys">
       {{ displayNames[personKey] }}
    </th>
   </tr>

PS: ui-grid

Answer 2

var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {
        $scope.headers=[];
    $scope.data = [];
    $scope.LoadMyJson = function() {
          for (var s in myJson){
            $scope.data.push(s);
            if ($scope.headers.length < 1) 
                for (var prop in myJson[s]){
                prop.data = [];
                $scope.headers.push({th:prop, td: []});
              }
          }
          for (var s in $scope.data){
            for (var prop in $scope.headers){
                var header = $scope.headers[prop].th;
                  var data = myJson[$scope.data[s]][header];
                     $scope.headers[prop].td.push(data);
            }
          }
    };

}

, , - , : http://jsfiddle.net/wLkz45qj/8/

, "" .