title: Angular: How can I apply directive that've been introduced later then layout?
body: <p>Suddenly I've realized that I have no working plan (though I've tried a lot of things before asking this question here) for solving following problem. Say, we have following simple angular application (<a href="http://codepen.io/shabunc/pen/RPoyao" rel="nofollow">jsfiddle #1</a>):</p>
  
  <pre><code>&lt;div ng-app="debug"&gt;
    &lt;ping/&gt;
    &lt;ping/&gt;
    &lt;ping/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code> var app = angular.module('debug', []);
  
      app.directive('ping', function() {
        return {
          restrict: 'E',
          template: '&lt;h1&gt;PONG!!!&lt;/h1&gt;'
        }
      })  
  </code></pre>
  
  <p>This works as charm. OK, now let's try to declare directive later then layout was present, something like (<a href="http://codepen.io/shabunc/pen/mJOLEW" rel="nofollow">jsfiddle #2</a>):</p>
  
  <pre><code> var app = angular.module('debug', []);
  
  // I've tried to use setTimeout initially but failed as well
  var $timeout  = angular.injector(['ng']).get('$timeout');
  
  $timeout(function() {
  
  app.directive('ping', function() {
    return {
      restrict: 'E',
      template: '&lt;h1&gt;PONG!!!&lt;/h1&gt;'
    }
  })  
  
  console.log('here');
  }, 1000);
  </code></pre>
  
  <p>I see nothing. My question is - how can I recompile angular application and apply direcitives that've been declared in asychrnonous fashion. </p>