title: Understanding how directive priority level work in Angularjs
body: <p><strong><code>app.js</code></strong> is:  </p>
  
  <pre><code>var app = angular.module('myApp',[]);
  app.directive('myDirective2', function () {
      return{
          restrict: 'A',
          priority: 100,
          //template:"&lt;h1&gt;myDirective2&lt;/h1&gt;",
          controller: function ($scope, $element, $transclude,$timeout) {
              //$scope.name = "executed myDirective2";
              $timeout(function () {
                  $scope.name = "executed myDirective2";
              }, 3000);
          }
      };
  });
  
  app.directive('myDirective3', function () {
      return{
          restrict: 'A',
          priority: 200,
          //template:"&lt;h1&gt;myDirective3&lt;/h1&gt;",
          controller: function ($scope, $element, $transclude, $timeout) {
              $timeout(function () {
                  $scope.name = "executed myDirective3";
              }, 3000);
          }
      };
  });
  </code></pre>
  
  <p>And <strong><code>index.html</code></strong> is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
      &lt;head&gt;
          &lt;script src="js/angular.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/app.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div my-directive3 my-directive2&gt;&lt;/div&gt;
          &lt;br/&gt;
          Name:{{name}}
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Though priority for <code>my-directive2</code> is lesser than <code>my-directive3</code> still why <code>my-directive2</code> is getting executed? Should not it be the directive with higher priority which in this case is <code>my-directive3</code>?</p>