title: Multiple Directives In AngularJS
body: <p>I have defined two directives for 2 divs: one for validating phone number and another for email validation. The problem here is that when I run it, it will execute only one validation that is given as second in the directives.js file. In the HTML page I have two different divs for phone number and email. How can I solve this?</p>
  
  <pre><code>&lt;div id=maindiv&gt;&lt;div class="number"&gt;&lt;input id="Cont_No" name="phone" type="text" data-phone placeholder="ENTER NUMBER" ng-model="phone"/&gt;&lt;/div&gt;&lt;div class="mail"  &gt;&lt;input id="Cust_Email" name="email" type="email" data-email placeholder="ENTER EMAIL" ng-model="email" /&gt;&lt;/div&gt;&lt;/maindiv&gt;.
  </code></pre>
  
  <p>Html is given above .Directive description is given below</p>
  
  <pre><code>angular.module('myApp.directives', []).directive('email', function() {
  return {
      restrice: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
          angular.element(element).bind('blur', function() {
  //some code
  });              
      }            
  }        
  </code></pre>
  
  <p>});</p>
  
  <pre><code>angular.module('myApp.directives', []).directive('phone', function() {
  return {
      restrice: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ctrl) {
        //console.log("helo");
          angular.element(element).bind('blur', function() {
  //some code
   });              
      }            
  }        
  });
  </code></pre>
  
  <p>here only the phone directive is geting executed.if i rearrange the orser only email directive gets executing.</p>