<div ng-app="app" class="container">
  <h1>Dynamic Angular Forms Validation in ngRepeat with ngMessage</h1>
  <hr />
  <form name="frmPage" ng-controller="pageCtrl" novalidate>
    
    <div class="row form-group" ng-repeat="item in list">
      <div class="control-lable col-md-2">{{item.id}}. {{item.name}}</div>
      <div class="col-md-6">
        <input type='email' 
               name='Ctrl{{$index}}'
               ng-model="item.email"
               ng-required='true'
               placeholder="Enter email address"
               class='form-control' />
      </div>
      <div class="col-md-4">
        <div ng-messages="frmPage['Ctrl' +$index].$error"
             ng-show="frmPage['Ctrl' +$index].$dirty || frmPage.$submitted">
          <div ng-message="required" class='error'>Required</div>
          <div ng-message="email" class='error'>Invalid Email</div>
        </div>
      </div>
    </div>
    <br>
    <div class='row'>
      <div class='col-md-5 pull-right'>
        <input type='submit' class='btn btn-success '  />
      </div>
    </div>    
    <pre class='col-md-6 col-md-offset-2'>{{list | json}}</pre>
  </form>
  
</div>
input[type="email"].ng-invalid{
    border: 1px solid #ff0000;
}

input[type="text"].ng-valid{
    border-left: 1px solid #bbb;
}

.form-control{ height: 40px; border-radius: 0px; font-size: 20px;}
.error{color: #ff0000}
var app = angular.module('app', ['ngMessages']);

app.controller('pageCtrl', ['$scope', function($scope) {  
  $scope.list =[
    {"id": 1, "name": "Kevin Spacey", "email": "kevin@spacey.com"},
    {"id": 2, "name": "Robert De Niro", "email": ""},
    {"id": 3, "name": "Russell Crowe", "email": ""},
    {"id": 4, "name": "Brad Pitt", "email": ""},
    {"id": 5, "name": "Angelina Jolie", "email": ""}
  ];   
}]);
Rerun