I want to design a table based on the controller. Basically a simple controller like : 

```

function Main($scope) {
    $scope.row = {        
        columns: [{
            type: 'single',
            name: 'col1'
        }, {
            type: 'double',
            name: 'col2'
        }]
    };
}

```

I want to change the number of `tr`s based on type of column. Basically the desired output is : 

```
<table>
    <tr>        
        <!-- for column in columns -->
        <!-- If column.type is single have single td -->
        <!-- If column.type is double have two td -->
        <td>col1</td>        
        <td>col2</td>
        <td>col2</td>
    </tr>
</table>

```

I have a fiddle that you can play with: <http://jsfiddle.net/basarat/7G6fF/>

I have tried using ng-repeat with a span but the issue is that `span` is removed from the DOM by the browser as it is an invalid child of tr: 

```
<table>
    <tr>            
        <!-- for column in columns -->
        <!-- If column.type is single have single td -->
        <!-- If column.type is double have two td -->
        <span ng-repeat="column in row.columns">
            <span ng-switch="column.type">
                <span ng-switch-when="single"><td>{{column.name}}</td></span>
                <span ng-switch-when="double"><td>{{column.name}}</td><td>{{column.name}}</td></span>
            </span>
        </span>
    </tr>
</table>

```