title: How to validate inputs dynamically created using ng-repeat, ng-show (angular)
body: <p>I have a table that is created using ng-repeat. I want to add validation to each element in the table. The problem is that each input cell has the same name as the cell above and below it. I attempted to use the <code>{{$index}}</code> value to name the inputs, but despite the string literals in HTML appearing correct, it is now working.</p>
  
  <p>Here is my code as of now:</p>
  
  <pre><code>&lt;tr ng-repeat="r in model.BSM "&gt;
     &lt;td&gt;
        &lt;input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/&gt;
        &lt;span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"&gt;&lt;strong&gt;Requires a number.&lt;/strong&gt;&lt;/span&gt;
        &lt;span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"&gt;&lt;strong&gt;*Required&lt;/strong&gt;&lt;/span&gt;
     &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have tried removing the <code>{{}}</code> from index, but that does not work either. As of now, the validation property of the input is working correctly, but the error message is not displayed.</p>
  
  <p>Anyone have any suggestions?</p>
  
  <p><strong>Edit:</strong> In addition to the great answers below, here is a blog article that covers this issue in more detail: <a href="http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/" rel="noreferrer">http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/</a></p>