title: AngularJS using same directive element multiple times (Validation error)
body: <p>I have prepared a form that have 2 directive elements in one form.
  But the first one's validation does not work and second one's validation errors appear on both directive element.</p>
  
  <p>How can I overcome this issue?
  The plunk project is on given link below.</p>
  
  <p><a href="http://plnkr.co/edit/mGHh6IfvhSIu0hW1wfCs?p=preview" rel="nofollow">Click for the Plunker Project</a></p>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="app"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Durakhan&lt;/title&gt;
      &lt;!--[if lt IE 9]&gt;
              &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var app = angular.module('app', []);
        app.controller('AppCtrl', ['$scope',function($scope) {
        $scope.person = {};
      }]);
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="AppCtrl"&gt;
      &lt;script src="inputEmail.js"&gt;&lt;/script&gt;
      &lt;script src="InputEmailCtrl.js"&gt;&lt;/script&gt;
      &lt;div id="Div1" class="modal" tabindex="-1" style="display: block" role="dialog" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                &lt;div class="modal-body"&gt;
                      &lt;form class="form col-md-12 center-block" name="loginForm"  novalidate&gt;
                          &lt;input-identityemail ng-model="person.identityemail"&gt;&lt;/input-identityemail&gt;
                          &lt;input-email ng-model="person.email1" required&gt;&lt;/input-email&gt;
                          &lt;input-email ng-model="person.email2" required&gt;&lt;/input-email&gt;
                          &lt;label class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
                          &lt;div class="col-sm-4" ng-class="{'has-error': loginForm.email3.$invalid}"&gt;
                            &lt;input type="email" name="email3" ng-model="person.email3" class="form-control" ng-required="required"&gt;
                            &lt;span ng-show="loginForm.email3.$error.required" class="help-block"&gt;Can't be blank&lt;/span&gt;
                            &lt;span ng-show="loginForm.email3.$error.email" class="help-block"&gt;Not a valid email&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      Person: &lt;pre&gt;{{person | json}}&lt;/pre&gt;
                      Form $error: &lt;pre&gt;{{loginForm.$error | json}}&lt;/pre&gt;
                      &lt;p&gt;Is the form valid?: {{loginForm.$valid}}&lt;/p&gt;
                      &lt;p&gt;Is 1st email valid?: {{loginForm.email1.$valid}}&lt;/p&gt;
                      &lt;p&gt;Is 2nd email valid?: {{loginForm.email2.$valid}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>input-email.html</h2>
  
  <pre><code>&lt;label class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
  &lt;div class="col-sm-4" ng-class="{'has-error': form.email.$invalid}"&gt;
    &lt;input type="email" name="email" ng-model="email" class="form-control" ng-required="required"&gt;
  
    &lt;span ng-show="form.email.$error.required" class="help-block"&gt;Can't be blank&lt;/span&gt;
    &lt;span ng-show="form.email.$error.email" class="help-block"&gt;Not a valid email&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>inputEmail.js</h2>
  
  <pre><code>'use strict';
  
  app.directive('inputEmail', function () {
      return {
          restrict: 'E',
          templateUrl: 'input-email.html',
          replace: false,
          controller: 'InputEmailCtrl',
          require: ['^form', 'ngModel'],
  
          // See Isolating the Scope of a Directive http://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive
          scope: {},
  
          link: function (scope, element, attrs, ctrls) {
              scope.form = ctrls[0];
              var ngModel = ctrls[1];
  
              if (attrs.required !== undefined) {
                  // If attribute required exists
                  // ng-required takes a boolean
                  scope.required = true;
              }
  
              scope.$watch('email', function () {
                  ngModel.$setViewValue(scope.email);
              });
          }
      };
  });
  </code></pre>
  
  <h2>inputEmailCtrl</h2>
  
  <pre><code>'use strict';
  
  app.controller('InputEmailCtrl', ['$scope', function ($scope) {
  }]);
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/mGHh6IfvhSIu0hW1wfCs?p=preview" rel="nofollow">Click for the Plunker Project</a></p>
  
  <p>thanks for answers.</p>