ng-switch inside ng-repeat not working

Question

I have data that basically boils down to this:

function ExampleCtrl($scope) {
    $scope.myData= [
        {text: "blah", other: 3, V: 'caseOne'},
        {text: "blah", other: 3, V: 'caseTwo'},
        {text: "blah", other: 3, V: 'caseThree'}
    ];
}

This is being used like this:

<div ng-controller="ExmapleCtrl">
    <table> 
       <tr> 
           <td>Text</td>
           <td>Other</td>
           <td>V</td>
       </tr>
       <tr ng-repeat="data in myData">
           <td><a href="#">{{data.text}}</a></td>
           <td>{{data.other}}</td>
           <td ng-switch on="data.V">
               <td ng-switch-when="caseOne"><img src="assets/img/pass.png"/></td>
               <td ng-switch-when="caseTwo"><img src="assets/img/pass.png"/></td>
               <td ng-switch-when="caseThree"><img src="assets/img/fail.png"/></td>
           </td>
    </table>
</div>

The problem is is that I am getting this error:

Error: No controller: ngSwitch..

I clearly have set the controller to ExampleCtrl, I don't see any typing errors, so I am at a loss unfortunately.

Answer 1

I believe the issue has to do with the ng-switch producing invalid markup. I'm not sure you can nest a td inside another td. Anyways, if you change it to this it will work:

 <td ng-switch on="data.V">
           <img src="assets/img/pass.png"  ng-switch-when="caseOne"/>
           <img src="assets/img/pass.png" ng-switch-when="caseTwo"/>
           <img ng-switch-when="caseThree" src="assets/img/fail.png"/>
       </td>

Here is a working demo: http://plnkr.co/edit/zUdkJYfnlJul6HsyCGfZ

I'll go ahead and suggest a couple more solutions that don't use a switch that might be a little nicer. Check out the last two td's

 <tr ng-repeat="data in myData">
           <td><a href="#">{{data.text}}</a></td>
           <td>{{data.other}}</td>

            <td>
               <img src='assets/img/{{data.V}}.png' />  <!-- assuming you have an image with name caseOne.png/caseTwo.png/etc -->
           </td>
           <td>
             <img src='{{passFail[data.V]}}' />   <!-- transform the case stuff to pass/fail based on some business rules, this is an object but could be a function-->
           </td>
      </tr>

$scope.passFail = {
  'caseOne' : 'assets/img/pass.png',
  'caseTwo' : 'assets/img/pass.png',
  'caseThree' : 'assets/img/fail.png'
};

Answer 2

An add-on to the above answer Incase if there is just plain text inside td like switch casing user roles or something, you can add a span tag inside the td to contain the text

<td ng-switch="role">
   <span ng-switch-when="1">Administrator</span>
   <span ng-switch-when="2">Moderator</span>
</td>