Angular rowspan and colspan

when creating a table with ng-repeat

HTML

<div ng-controller="ctrl">
    <div class='customContainer' ng-click="addDirective(this, 123)">Add directive</div>
    <table>
    <tr ng-repeat="trs in sessionOverviewTrs">
   <td ng-repeat="tds in trs track by $index" colspan="{{tds.colspan}}" rowspan="{{tds.rowspan}}">
        {{tds.value}}
    </td></tr></table>
</div>

CSS

.customContainer {
    min-width: 40px;
    min-height: 40px;
    background-color: yellow;
}
table, table td{
    border: solid black 1px;
}

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrl', function ($scope, $rootScope, $compile) {
    $scope.sessionOverviewTrs = [[
        {value: "asdf"},
        {value: "qwer"}],
        [{colspan: 2, value: "long text"}],
                                 [{rowspan: 2, value: "long long"}, {value: "short"}],[{value: "short2"}]];

$scope.why = 2;

$scope.funct1 = function(){
return 2
}

});
angular.bootstrap(document, ['app']);