ng-repeat и пользовательская директива

Я пытаюсь перевести наше поколение в директиву, но при использовании этого заголовки теряют свой стиль и заканчивают группировку слева. Может ли кто-нибудь предложить какие-то указания относительно того, что я делаю неправильно?

Заголовки выглядят так:

Col1Col2Col3Col4Col5

Вместо этого, когда я использую один и тот же html без директивы. Обратите внимание, что они правильно выровнены над столбцами данных:

Col1 Col2 Col3 Col4 Col5

index.html

<table class="table table-hover">                        
    <thead>
        <table-headers></table-headers>
    </thead> 
    ...
    ...
</table>

directives.js

app.directive('tableHeaders', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    priority: 1001,
    templateUrl: '/PATH/TO/PARTIAL/table-headers.html'
  };
});

Стол-headers.html

<tr>
    <th ng-cloak="true" ng-repeat="header in coreHeaders" ng-click="setOrderBy(header)"> {{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
    <th class="align-right" ng-cloak="true" ng-repeat="header in statHeaders" ng-click="setOrderBy(header)">{{header}} <i class="fa" ng-show="header == ordering.currentHeader" ng-class="ordering.reverse ? 'fa-caret-up' : 'fa-caret-down'"></i></th>
</tr>