title: Custom directive to validate data after submit in AngularJS
body: <p>I'm trying to use a custom directive to validate some data after a call to a web service.
  I found an example on blogs, but it calls the web service at every change in the form value!!</p>
  
  <p>I'd like this custom directive to be called only when the user submits data.</p>
  
  <p>Here is the current code:</p>
  
  <pre><code>// The directive aims to know if scan.value already exists (HTTP Response 2xx) or not (HTTP 404) in the database.
  .directive('ensureExists', ['$http',
                               function($http) {
    return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        $http({
          method: 'GET',
          url: 'http://www.toto.com/api/' + scope.scan.value
        }).success(function(data, status, headers, cfg) {
          ctrl.$setValidity('exists', true);
        }).error(function(data, status, headers, cfg) {
          ctrl.$setValidity('exists', false);
        });
      }
    }
  }]);
  </code></pre>
  
  <p>In HTML:</p>
  
  <pre><code>&lt;input type="number"
      name="cardid"
      required
      ng-model="scan.value"
      ng-focus &lt;!-- Another custom directive that make simple data type validation --&gt;
      ensure-Exists
      /&gt;
  </code></pre>
  
  <p>Currently, I have the feeling the code is called as soon as the form is loaded, since I have an error because scope.scan.value is undefined.</p>
  
  <p>Thanks for help.</p>