Q:

Error Load dynamic data ng-repeat

Guys I have a problem I must be doing something wrong most do not know, it seems that google chrome organizes json at render time or angle that makes the 'ng-repeat'. And when I load the data in the grid, and it reverses the columns is reversed 
    'use strict';

     angular.module('grid', [])
      .run(templateRun)
      .directive('grid', Grid);

    function templateRun ($templateCache) {
        $templateCache.put('grid2.html', '<table><thead><tr><th ng-repeat="(key,value) in option.columns" ng-click="sort(value.predicate)"><strong>{{value.text}}</strong><th><tr></thead><tbody><tr ng-repeat="data in option.data"><td ng-repeat="field in data">{{field}}</td></tr></tbody></table>');
    }

    function Grid ($templateCache, $rootScope, $compile, $rootElement) {

        return{
            restrict: 'E',
            $scope: {
                option: "=data"
            },
            template: $templateCache.get('grid2.html'),
            link: function ($scope, $element, $attr) {

            }

        }

    }

    angular.module("app", ["grid"])
        .controller("HomeCtrl", HomeCtrl);

    function HomeCtrl ($scope) {

        $scope.people = [
            {
                name: "John",
                occupation: "Programmer",
                age: 5
            }, 
            {
                name: "Jill",
                occupation: "Analyst",
                age: 10
            }, 
            {
                name: "Jeff",
                occupation: "Sales",
                age: 2
            }, 
            {
                name: "Joan",
                occupation: "Designer",
                age: 50
            }
        ];

        $scope.option = {
            data: $scope.people,
            columns: [
                {
                    text: "Nome"
                },
                {
                    text: "Ocupação"
                },
                {
                    text: "Idade"
                }
            ]
        }

    }

<!doctype html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Grid</title>
</head>
<body ng-controller="HomeCtrl">

    <grid data="option"></grid>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="grid.js"></script>
</body>
</html>

Error img: http://i.stack.imgur.com/RpVNe.png

A:

There are probably several ways to solve this problem.  
One way is to map the column names to the coorresponding json field names and use this mapping to determine which field to place in each cell of the table.
    $scope.option = {
        data: $scope.people,
        columns: [
            {
                text: "Nome",
                dataProp: "name"
            },
            {
                text: "Ocupação",
                dataProp: "occupation"
            },
            {
                text: "Idade",
                dataProp: "age"
            }
        ]
    }

tbody portion of the html template 
<tbody>
  <tr ng-repeat="data in option.data">
    <td ng-repeat="col in option.columns"> {{data[col.dataProp]}}</td>
  </tr>
</tbody>

Working example

