включенная директива не работает в angular js

Я создал директиву в angular js с помощью transclude: true и replace: true, как показано ниже.

.directive('customElement', [function(){            
        return {
            restrict: 'E',
            template: '<table class="table table-striped table-bordered table-hover dataListing"><tbody ng-transclude></tbody></table></div>',
            replace: true,
            scope: {
                tableCaption : "@",
                colsName : "=",
                tableData : "="
            },                
            transclude: true,
            link: function(scope, elem, attrs) {
                console.log(scope.colsName);
            }
        };
        }]);

и в html я называю это как

<custom-Element table-Caption="Port Listing" cols-Name="tableColumns" table-Data="portList.emulationDetails">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
    </tr>
</custom-Element>

но когда я запускаю этот код, включенные данные (строки таблицы) преобразуются в диапазон и помещаются в директиву, как показано на изображении ниже