title: Scope in custom Directive in AngularJS for checking if a value already exists in DB
body: <p>I have a problem of scope in my custom directive created for checking if an email already exists in the DB. Indeed the results retrieved by the AJAX query are not returned in the scope (and in my template).</p>
  <p>For implementing that I follow a solution for checking if an email 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>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. The query returns the persons with the same email in JSON Format</p>
  <p>Here <strong>my controller</strong></p>
  <pre><code>// MY CUSTOM 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(con){
                      $timeout(function(){
                      if(email.length &gt;0){
                          if(con.length &gt;0){
                              model.$setValidity('emailExists', false);
                              scope.emailAlreadyExist='true';
                              scope.con = con; 
                              console.log('NB: ' + scope.con.length); // IT'S WORKING
                              console.log(&quot;email exist: &quot; + scope.emailAlreadyExist); // IT'S WORKING TOO                         
                          }else{
                              model.$setValidity('emailExists', true);
                              scope.emailAlreadyExist='false';    
                              scope.con = null;       
                              alert('jjjjj' + con);
                              
                              console.log(&quot;email NOT EXIST : &quot; + scope.emailAlreadyExist);                            
                          }
                      }
                      }, 1000);
                  });
                  
              };
          }
      } 
  });
  
  
  app.controller('ctrlAddContacts', function ($scope, MyTextSearch, ContactService){
  
      $scope.emailAlreadyExist = 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>my Factory</strong>:</p>
  <pre><code>app.factory('ContactService', function($http){
  
      var factory={};
  
      // CALL COLDFUSION FUNCTION --&gt; GET JSON RESULTS ON PERSONS DATA     
      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>my template</strong>:</p>
  <pre><code>&lt;div ng-repeat=&quot;(key, email) in emails | limitTo : 5&quot; style=&quot;z-index:6&quot;&gt;
  
    &lt;div class=&quot;form-group&quot;&gt;
  
      &lt;span ng-switch=&quot;$index&quot;&gt;
          &lt;label ng-switch-when=&quot;0&quot; for=&quot;txtEmail&quot; class=&quot;col-sm-2 control-label&quot;&gt;Main email&lt;/label&gt;
          &lt;label ng-switch-default for=&quot;txtEmail&quot; class=&quot;col-sm-2 control-label&quot;&gt;Email  {{$index+1}}&lt;/label&gt;
      &lt;/span&gt; 
  
      &lt;div class=&quot;col-sm-9&quot; ng-switch=&quot;$index&quot;&gt;
      
          &lt;input ng-switch-when=&quot;0&quot; type=&quot;email&quot; class=&quot;form-control&quot;
          name=&quot;txtEmail_{{$index}}&quot; maxlength=&quot;100&quot; placeholder=&quot;Enter main email&quot;
          ng-model=&quot;contact.EMAIL&quot;
          email-available emailexist = &quot;emailAlreadyExist &quot; &gt; 
      
          
          &lt;input ng-switch-default type=&quot;email&quot; class=&quot;form-control&quot; 
          name=&quot;txtEmail_{{$index}}&quot; maxlength=&quot;100&quot; placeholder=&quot;Enter Email {{$index+1}}&quot; 
          ng-model=&quot;contact['EMAIL_'+$index]&quot; 
          email-available emailexist = &quot;emailAlreadyExist &quot; &gt;     
          
          &lt;!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START ---------------------&gt;
          {{con}} 
          &lt;!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ----------------------&gt;
  
          &lt;div ng-show=&quot;ContactForm['txtEmail_' + $index].$dirty &amp;&amp; ContactForm['txtEmail_' + $index].$error.emailExists&quot; class=&quot;alert alert-info&quot; role=&quot;alert&quot; style=&quot;margin-top:10px;&quot;&gt;
          &lt;span class=&quot;glyphicon glyphicon-alert&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Error:&lt;/span&gt;
              This email is already used &lt;!--- CORRECTLY DISPLAYED WHEN THE EMAIL IS ALREADY USED IN THE DB ---&gt;
              
              &lt;!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL --------------------- START ---------------------&gt;
              &lt;ul id=&quot;contacts_list&quot;&gt;
                  &lt;li ng-repeat=&quot; contact in con&quot; style=&quot;position:relative; z-index:25&quot;&gt;
                      &lt;div angular-popover direction=&quot;right&quot; template-url=&quot;template/popover.html&quot; mode=&quot;mouseover&quot;&gt;
                          &lt;a href=&quot;#/view-contacts/{{contact.id}}&quot;&gt;{{ contact.lastname }} {{ contact.firsttname }}&lt;/a&gt; 
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;!--------------------- PROBLEM FOR DISPLAYING THE CONTACTS PERSON WITH THE EMAIL ---------------------- END ----------------------&gt;
          &lt;/div&gt;
      
      &lt;/div&gt;
  
      &lt;div  class=&quot;col-sm-1&quot; ng-show=&quot;$index == 0&quot;&gt;
          &lt;a href=&quot;&quot; ng-click=&quot;add()&quot; ng-show=&quot;emails.length&lt;5&quot; class=&quot;inline btn btn-primary icon_email&quot;&gt;
          &lt;span class=&quot;glyphicon glyphicon-plus icon2&quot;&gt;&lt;/span&gt;&lt;span class=&quot;addButton&quot;&gt;Add&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;  
      
    &lt;/div&gt;
    
  &lt;/div&gt;
  </code></pre>
  <p>Could you please help me for solving this problem?</p>
  <p>Thanks for your help</p>