AngularJS - dynamic naming using $index in expression

Question

I have a directive in which i create many ng-form's and i name each form based on the $index (from the ng-repeat). My problem is that i want to show an error container (that contains the error message) when the form is invalid but i cant find how to properly reference the form.

Here is my code:

<ng-form name="innerForm{{$index}}">

    <label ... ><input name="input" ... />

        <div class="error-container" ng-show="'innerForm'+$index.input.$invalid">
               // show the error message
        </div>

</ng-form>

I want 'innerForm'+$index.input.$invalid to be evaluated as innerForm5.input.$invalid for example.

I have made many attempts but i can't get it to work. What is the correct way to reference my dynamically named form?

Answer 1

please see here : http://jsbin.com/jocane/4/edit

 <div ng-controller="firstCtrl">
  <div ng-repeat="object in allMyObjects">
    <ng-form name="innerForm{{$index}}">
  <input type="text"  ng-model="object.name" required name="userName">

      <div ng-show="{{'innerForm'+$index}}.userName.$invalid">
               error
        </div>
      </form>

    </div>