Get child element width in Angular directive

Next I have a table fed by a simple routine. I need to make the scroll to tbody fixed. So far so good. Could make N forms. To try to make the responsive table I'm using a directive to calculate and set the value of each th after the data is rendered. To calculate the size of each th I'm using the first line of tbody to know what size I should put in each th to make them aligned.

Well! There's the problem. For some reason when I try to get the size of the TDs all return 0. I tried for clientWidth, offsetWidth, with etc. All return 0.

Below the screen representing the problem:

Mydirective:

.directive("scrolltbody", function ($timeout) {
    return {
        scope: {
            val: "="
        },
        link: function(scope, element, attrs) {
            scope.$on("ajustarTabelaPedido", function() {
                $timeout(function(){
                    compilar(element, attrs);
                }, 10000);
            });
        }
    }

    function compilar (element, attrs){
        var wTable = angular.element(element).width();
        var th = angular.element(element).find("thead th");
        var tr = angular.element(element).find("tbody tr").get(0);
        var td = angular.element(tr).find("td");

        angular.forEach(th, function (itemTh, indexTh){
            var wElement = angular.element(itemTh).attr("widthscroll");
            var wElementCalc = ((wElement * wTable) / 100);
            /* w = 0 forever*/
            var w = $(tr).find("td").eq(indexTh).outerWidth();
        });
    }
});

My controller:

.controller("PedidoController", function($scope, $pedido) {
    /*
    .
    .
    .
    */

    $scope.buscar = function() {
        $pedido.buscar().then(function(req) {
            $scope.pedido = req;

            /* This dispatch update for directive */
            $scope.$broadcast("ajustarTabelaPedido");
        });
    };

    /*
    .
    .
    .
    */
});

HTML:

<table id="pedido" class="gridbox pedido" scrolltbody val="pedido" style="height: 350px;">
    <thead data-spy="affix" data-offset-top="60" data-offset-bottom="200">
        <tr>
            <th>Imagem</th>
            <th>Produto</th>
            <th>
                <span ng-click="ordem.coluna='produto.alavancagem';ordem.reverso=!ordem.reverso">Planejado</span>
                <i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-up fa-1 justify" title="Regularizar caixaria para mais." ng-click="corrigeCaixaria(pedido, 1)"></i>
                <i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-down fa-1 justify" title="Regularizar caixaria para menos." ng-click="corrigeCaixaria(pedido, 0)"></i>
            </th>
            <th>Preço Tabela</th>
            <th>Caixaria</th>
            <th>Preço Praticado</th>
            <th>% Desconto</th>
            <th>% Politica Desconto</th>
            <th>Preço c/ Desconto</th>
            <th>Bonificação</th>
            <th>Preço Pedido</th>
        </tr>
    </thead>
    <tbody class="body" id="pedido-produto">
        <tr ng-repeat="p in pedido.item | orderBy:ordem.coluna:ordem.reverso | filter: itemFilter" >
            <td><img src="<...>" alt="{{p.produto.produto.id | normalizarProdutoSku}}" style="max-height: 50px;" /></td>
            <td><i class="fa fa-trash-o fa-1 justify icon-lixeira"></i> {{p.produto.produto.descricao}}</td>
            <td>
                <input ng-model="p.produto.alavancagem" />
            </td>
            <td>{{p.produto.precoTabelaView | currency}}</td>
            <td>{{p.produto.gradeMinima}}</td>
            <td>
                <input ng-model="p.produto.precoPraticado"/>
            </td>
            <td><input ng-model="p.produto.percentualDesconto"/></td>
            <td><input ng-model="limitePoliticaDesconto"/></td>
            <td>R$ <input ng-model="p.produto.precoDesconto"/></td>
            <td  ng-class="{'celula-erro' : p.bonificacaoErro}">
                <input ng-model="p.produto.bonificacao" />
            </td>
            <td>{{p.produto.precoDesconto * p.produto.alavancagem | currency}}</td>
        </tr>
    </tbody>
</table>

What would be the problem?