title: AngularJS Directive for checking if email already used
body: <p>I follow a solution for checking if a username is already present in the DB: defined in this topic <a href="https://stackoverflow.com/questions/28717378/angularjs-custom-directive-to-check-if-a-username-exists">angularjs: custom directive to check if a username exists</a></p>
  
  <p>I put that in practice for checking if an email already exists in the DB. In my application a user can register until 5 emails.
  When the user enters an email in the field, the query is correctly executed for checking if the email is already used in the database.</p>
  
  <p>Some error messages have been implemented when the email format is not correct.
  A message should be equally displayed when the email is already used (so present in the DB) but I have some problems for doing that (with the 5 fields for email addresses)</p>
  
  <p>Here <strong><em>my controller</em></strong>:</p>
  
  <pre><code>// MY DIRECTIVE FOR CHECKING IF EMAIL IS ALREADY USED
  app.directive('emailAvailable', function($timeout, $q, $http, ContactService) {
      return {
          restrict: 'AE',
          require: 'ngModel',
          link: function(scope, elm, attr, model) { 
              model.$asyncValidators.emailExists = function() {   
                  email= elm.val();
                  return ContactService.searchContactByEmail(email).success(function(contact){
                      $timeout(function(){
                          if(contact.length &gt;0){
                              model.$setValidity('emailExists', contact);
                              //model.$setValidity('unique', false); // For validation criteria in the form
                              scope.emailAlreadyExist='true';
                              scope.contacts = contact;
                              // THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
                              console.log("exist : " + scope.emailAlreadyExist);
                          }else{
                              model.$setValidity('emailExists', contact); 
                              //model.$setValidity('unique', true); // For validation criteria in the form
                              scope.emailAlreadyExist='false';                
                              scope.contacts = null;
                              // THE VALUE IS CORRECTLY DISPLAYED IN THE CONSOLE
                              console.log("exist : " + scope.emailAlreadyExist);                                  
                          }               
                      }, 600);
                  });         
              };
          }
      } 
  });
  
  
  app.controller('ctrlAddContacts', function ($scope, ContactService){
          $scope.title="Add a contact";   
          $scope.edit_oldContact = "false";       
  
      // ALLOW TO HAVE SEVERAL EMAILS
      $scope.emails = [
      {
      }];
      $scope.log = function() {
        console.log($scope.emails);
      };
      $scope.add = function() {
          var dataObj = {email:''};       
          $scope.emails.push(dataObj);
      }
  
      .........
  });
  </code></pre>
  
  <p>Here <strong><em>my Factory</em></strong>:</p>
  
  <pre><code>app.factory('ContactService', function($http){
  
      var factory={};
  
      // CALL COLDFUSION FUNCTION     
      factory.searchContactByEmail=function(string){
          if (string){
              chaine='http://myapp/contacts.cfc?method=searchContactByEmail&amp;contactEmail=' + string;      
          }else{
              chaine='';      
          }
          return $http.get(chaine);
      };  
  
      return factory;
  
  })
  </code></pre>
  
  <p>Here <strong><em>my Template</em></strong>:</p>
  
  <pre><code>&lt;! --------------------------- MANAGE MAILS ---------------------------&gt;
  &lt;div ng-repeat="(key, email) in emails | limitTo : 5"&gt;
  
    &lt;div class="form-group"&gt;
  
      &lt;span ng-switch="$index"&gt;
          &lt;label ng-switch-when="0" for="txtEmail" class="col-sm-2 control-label"&gt;Main email&lt;/label&gt;
          &lt;label ng-switch-default for="txtEmail" class="col-sm-2 control-label"&gt;Email  {{$index+1}}&lt;/label&gt;
      &lt;/span&gt; 
  
      &lt;div class="col-sm-9" ng-switch="$index"&gt;
  
          &lt;input ng-switch-when="0" type="email" class="form-control"
          name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter main email"
          required
          ng-model="contact.EMAIL"
          email-available
          &gt;
          &lt;input ng-switch-default type="email" class="form-control"
          name="txtEmail_{{$index}}" maxlength="100" placeholder="Enter Email {{$index+1}}"
          required
          ng-model="contact['EMAIL_'+$index]" 
          email-available
          &gt;       
          &lt;!-- THE VALUE emailAlreadyExist IS NOT DISPLAYED IN THE PAGE --&gt;
          &lt;p&gt;txtEmail_{{$index}} : {{emailAlreadyExist}}&lt;/p&gt;  
  
  
          &lt;! ----------------- Display the message when the email is already used -----------------&gt;          
          &lt;div ng-show="ContactForm['txtEmail_' + $index].$dirty &amp;&amp; emailAlreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px;"&gt;           
              &lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
              Email is already used
          &lt;/div&gt;      
  
          &lt;div ng-if="ContactForm['txtEmail_' + $index].$pending.emailExists"&gt;checking....&lt;/div&gt;
          &lt;! ----------------- Display the message when the email is already used -----------------&gt;      
  
          &lt;div class="error-container" 
          ng-show="ContactForm['txtEmail_' + $index].$dirty &amp;&amp; ContactForm['txtEmail_' + $index].$invalid"&gt;
              &lt;div ng-show="ContactForm['txtEmail_' + $index].$error.email" class="alert alert-info" role="alert" style="margin-top:10px;"&gt;
                  &lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
                  That is not a valid email. Please input a valid email.
              &lt;/div&gt;
  
              &lt;div ng-show="ContactForm['txtEmail_' + $index].$error.required" class="alert alert-info" role="alert" style="margin-top:10px;"&gt;
                  &lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
                  Your email is required.
              &lt;/div&gt;
  
              &lt;div ng-show="ContactForm['txtEmail_' + $index].$error.minlength" class="alert alert-info" role="alert" style="margin-top:10px;"&gt;
                  &lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
                  Your email is required to be at least 3 characters
              &lt;/div&gt;
  
              &lt;div ng-show="ContactForm['txtEmail_' + $index].$error.maxlength" class="alert alert-info" role="alert" style="margin-top:10px;"&gt;
                  &lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="sr-only"&gt;Error:&lt;/span&gt;
                  Your email cannot be longer than 20 characters
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div  class="col-sm-1" ng-show="$index == 0"&gt;
          &lt;a href="" ng-click="add()" ng-show="emails.length&lt;5" class="inline btn btn-primary icon_email"&gt;
          &lt;span class="glyphicon glyphicon-plus icon2"&gt;&lt;/span&gt;&lt;span class="addButton"&gt;Add&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;  
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;! --------------------------- MANAGE MAILS ---------------------------&gt;
  </code></pre>
  
  <p>Could you tell me how to update the script (of the directive I suppose) for displaying the message <strong><em>Email is already used</em></strong> ?</p>
  
  <p>Thanks in advance for your help.</p>