transcluded directive not working in angular js

Question

I have created a directive in angular js with transclude: true, and replace: true as below

.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);
            }
        };
        }]);

and in the html i am calling it as

<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>

but when I run this code the transcluded data (table rows) is get converted into a span and placed into the directive as shown in the image below