How to get data attributes value from child elements in angular controllers

In Angular, you need to think in terms of model, not the resulted DOM. The model is the only source of truth. So, you need to put your headers somewhere in your model. Then you make a loop through you data, and for each item you iterate over headers and create a table. You'll need a directive to work woth DOM, a controller to contain the data and a simple template:

The DOM:

<div data-ng-controller="DataGrid">
  <table class="table table-striped">
    <thead>
      <tr>
        <th data-header="firstName" data-headers="headers">
          First name
        </th>
        <th data-header="lastName" data-headers="headers">
          Last name
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="character in characters">
        <td data-ng-repeat="header in headers">
          {{character[header]}}
        </td>
      </tr>
    </tbody>
  </table>
</div>

Angular application:

'use strict';

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

Datagrid controller:

'use strict';

DataAttributes.controller('DataGrid', ['$scope', function($scope){
    // let this data came from server
    $scope.characters = [
        {
            'firstName' : 'Anakin',
            'lastName' : 'Skywalker',
            'email' : '[email protected]',
            'age' : 9
        },
        {
            'firstName' : 'Kos',
            'lastName' : 'Palpatine',
            'email' : '[email protected]',
            'age' : 60
        },
        {
            'firstName' : 'Jar',
            'lastName' : 'Jar',
            'email' : '[email protected]',
            'age' : 23
        }
    ];

    $scope.headers = [];
}]);

And a directive:

'use strict';

DataAttributes.directive('header', [function(){
    return {
        'restrict' : 'A',
        'scope' : {
            'headers' : '='
        },
        'link' : function(scope, iElement, iAttrs){
            scope.headers.push(iAttrs['header']);
        }
    };
}]);

I've created a plunkr, so you can play with it.

Let's see what is under the hood. Suppose you've already got your data (characters) somewhere else. Now you want to dynamically build a table with some fields from it. You create a directive to capture field name (header). It need to put header names in the controllers's scope. So, you need to bind a model from parent scope, to directive's. This is achieved with 'headers' : '=' line, which tells Angular to

set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name.

The directive simply pushes field names to parent scope. Now, ngRepeat can be used to iterate through them and render a row for each element from characters. That's it!