ng-switch not working with nested ng-repeat for table - angularjs

Question

I am getting error while rendering table based on provided columns definitions and row data (2 different JSON objects) using nested 'ng-repeat' and ng-switch directives:
Is there any way to use 'ng-repeat' and ng-switch for rendering table cells without using wrapper elements.
Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
Here is my table template
<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}}">
<tbody>
<tr ng-repeat="record in data">
<td ng-repeat="col in metaData.columns" ng-switch on="col.type"
ng-switch-when="index"> {{record.$index + 1}} </td>
</tr>
</tbody>
Work around I made for time being
I am using ng-if to render table cell and rows dynamically in following way:
<table id={{metaData.id}} name="{{metaData.name}}" class="{{metaData.classes}} vk-table" >
<tbody>
<tr ng-repeat="record in data | orderBy : sortBy : reverse">
<td ng-repeat-start="col in metaData.columns" ng-if="col.type == 'index'"> {{$parent.$parent.$index + 1}}. </td>
<td ng-if="col.type =='name'">{{record.name = [record.fname, record.mname, record.lname].join(' ') }}</td>
<td ng-if="col.type =='date'">{{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}}</td>
<td ng-if="col.type =='inMobile'">
{{record[col.dataKey]}}
</td>
<td ng-if="col.type =='email'">
{{record[col.dataKey]}}
</td>
<td ng-if="col.type =='gender'">{{record[col.dataKey] == 'm' ? 'Male' : 'Female'}}</td>
<td ng-if="col.type =='place'">{{record[col.dataKey].name}}</td>
<td ng-repeat-end ng-if="!col.type">{{record[col.dataKey]}}</td>
</tr>
</tbody>
</table>
How can I achieve same output using ng-switch without using additional elements?

Answer 1

The ng-switch-when directive should be applied on a child element of the element where the ng-switch directive is applied. In your case, you applied them on the same element.
Try (inside tbody)
<tr ng-repeat="record in data | orderBy : sortBy : reverse">
<td ng-repeat="col in metaData.columns">
<div ng-switch on="col.type">
<div ng-switch-when="index">
{{record.$index + 1}}
</div>
<div ng-switch-when="name">
{{record.name = [record.fname, record.mname, record.lname].join(' ') }}
</div>
<div ng-switch-when="date">
{{record[col.dataKey] = toDate(record[col.dataKey]) | date : 'mediumDate'}}
</div>
<div ng-switch-when="inMobile">
{{record[col.dataKey]}}
</div>
<div ng-switch-when="email">
{{record[col.dataKey]}}
</div>
<div ng-switch-when="gender">
{{record[col.dataKey] == 'm' ? 'Male' : 'Female'}}
</div>
<div ng-switch-when="place">
{{record[col.dataKey].name}}
</div>
<div ng-switch-default>
{{record[col.dataKey]}}
</div>
</div>
</td>
</tr>