AngularJs Select within a ng-repeat select Name with $index not recognized

Question

I have a select statement within a ng-repeat. I use the $index value to get a unique name for each of the selects. I then use this name to check for validations. The validations work well when not within a repeat but when within a repeat the red box around the required select does not show up.

Here is the fiddle.

Any help is much appreciated.

P.S click on the + sign to add more rows in the fiddle.

http://jsfiddle.net/angularNovice/T47CG/6/

<form name="testForm">
   <select name="selectOutside"      
      class="span2" ng-model="plugin.selectedDevice" 
      ng-options="item.ID as item.Title for item in devices" ng-required="true">
      <option style="display:none" value=""></option>
   </select>
   <span class="error" ng-show="testForm.selectOutside.$error.required">
      *
   </span><br>
   <a class="btn" ng-click="addPlugin()">
   <i class="glyphicon glyphicon-plus"></i></a>

   <table>
      <tr ng-repeat="plugin in plugins">
         <td><strong>{{$index}}</strong>
         </td>
         <td>
            <select name="selectInside{{$index}}" class="span2"     
                ng-model="plugin.selectedDevice" 
                ng-options="item.ID as item.Title for item in devices" ng-required="true">
                <option style="display:none" value=""></option>
            </select>
            <span class="error"
                ng-show="testForm.selectInside{{$index}}.$error.required">
                 *
            </span>
         </td>
     </tr>
  </table>
</form>   

Answer 1

The issue is name property that you generate inside the ng-repeat does not generate the correct property on the form controller variable. In your case it is

{"selectOutside":{},"selectInside{{$index}}":{}}

Your option is to declare a sub form on each repeat and then use the same name of the variable and check for errors.

See this post for details http://www.benlesh.com/2013/03/angular-js-validating-form-elements-in.html