title: angularjs: how to know all directive is ready
body: <p>I want make sure all directives are ready. How to? Here is what I try, but not correct.</p>
  
  <pre><code>leafUi.factory('leafState', function($rootScope) {
      var unreadyUi = [], readyUi = [];
      return {
          unready: function(ui) {
              console.log(ui + ' unready');
              unreadyUi.push(ui);
          },
          ready: function(ui) {
              console.warn(ui + ' ready');
              readyUi.push(ui);
              if (readyUi.length === unreadyUi.length) {
                  $rootScope.$broadcast('leafUiReady', 'all leaf ui component is ready');
                  // unreadyUi = null;
                  // readyUi = null;
              }
          }
      }
  });
  
  leafUi.directive('leafScroll', function($timeout, leafState, leafScroll) {
      return {
          restrict: 'E',
          transclude: true,
          link: function(scope, ele, attrs, ctrl, transclude) {
              leafState.unready('leafScroll');
              // more code .....
              leafState.ready('leafScroll');
          }
      };
  });
  
  leafUi.directive('leafContent', function($timeout, leafState, leafScroll) {
      return {
          restrict: 'E',
          transclude: true,
          link: function(scope, ele, attrs, ctrl, transclude) {
              leafState.unready('leafContent');
              // more code .....
              leafState.ready('leafContent');
          }
      };
  });
  // more directive.....
  </code></pre>
  
  <p>Here is an example log:</p>
  
  <p><a href="https://i.stack.imgur.com/YhWgq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YhWgq.png" alt="example log"></a></p>
  
  <p>From the log, we can know that directive ready and unready can be separated by other directive and length of <code>readyUi</code> has many chance to equal to <code>unreadyUi</code>.
  So how can I assure all directives are ready? </p>