Bind ng-messages to ng-repeat

Question

I'm using a ng-repeat to render a fieldset of a form:

<fieldset data-ng-repeat="education in edit_profile.education">
  <div class="row">                              
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile">
      <label>University</label>
      <input required="" name="editProfile_StudentUni{{$index}}" ng-model="education.uni">
      <div ng-messages="myProfile['editProfile_StudentUni' + $index].$error">
        <div ng-message="required">This is required.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile">
      <label>Course</label>
      <input required="" name="editProfile_StudentCourse{{$index}}" ng-model="education.course">
      <div ng-messages="myProfile['editProfile_StudentCourse' + $index].$error">
        <div ng-message="required">This is required.</div>
      </div>
    </md-input-container>
  </div>
  <div class="row">                              
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>Start year</label>
      <input name="editProfile_StudentStartYear{{$index}}" ng-model="education.start_year" required ng-pattern="/^20[0-9]{2}$/" md-maxlength="4">
      <div ng-messages="myProfile['editProfile_StudentStartYear' + $index].$error">
        <div ng-message="required">This is required.</div>
        <div ng-message="pattern" class="my-message">Must be a valid year.</div>
        <div ng-message="md-maxlength">Must be a valid year.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>End year</label>
      <input name="editProfile_StudentEndYear{{$index}}" ng-model="education.end_year" ng-pattern="/^20[0-9]{2}$/" md-maxlength="4">
      <div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error">
        <!-- <div ng-message="required">This is required.</div>i dont have end year required: student may still be doing the course-->
        <div id="error5" class="error-message" ng-show="errorMsg5">{{errorMsg5}}</div>
        <div ng-message="pattern" class="my-message">Must be a valid year.</div>
        <div ng-message="md-maxlength">Must be a valid year.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>Average</label>
      <input name="editProfile_StudentAverage{{$index}}" ng-model="education.average" ng-pattern="/^[1-2]{1}[0-9]{1}(\.[0-9]{1,2})?$/" step="0.01" required/>
      <div ng-messages="myProfile['editProfile_StudentAverage' + $index].$error">
        <div id="error4" class="error-message" ng-show="errorMsg4">{{errorMsg4}}</div>
        <div ng-message="required">This is required.</div>
        <div ng-message="pattern" class="my-message">Must be a valid value.</div>
      </div>
    </md-input-container>
  </div>
  <a class="btn remove-info" ng-show="!$first" ng-click="removeEducation(education)">Remove</a>
</fieldset>

The problem is that the messages only render on the first copy of the div (because the variable is already set in the controller). For the remaining copies, the input is red because it is not set, which is correct, but the error message does not appear.

When I inspect the input element, it shows

<input name="editProfile_StudentEndYear0"

which is correct, but when I inspect the messages element, it shows

<div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error"

I've seen many answers around here that say to use this method, but for me it isn't working. Any ideas?

Answer 1

That syntax is working fine in this plunker: https://plnkr.co/edit/3mTPRAcNmBVHdABMuZEo?p=preview

<form name="myForm" novalidate="">
  <div ng-repeat="fieldSet in fieldSets">

    <input type="text" required="" name="firstName{{$index}}" ng-model="fieldSet.firstName" />
    <div ng-messages="myForm['firstName'+$index].$error">
      <div ng-message="required">
        This field is required
      </div>
    </div>

  </div>
</form>

Are you using a really old version of AngularJS?