title: $compile nested directive from within another directive
body: <p>TL;DR; <a href="http://jsfiddle.net/5HnTT/" rel="nofollow">jsFiddle here</a>.</p>
  
  <p>I want to use two directives (<code>kmOuter</code> and <code>kmInner</code>) as nested directives:</p>
  
  <pre><code>&lt;div km-outer&gt;
      &lt;div km-inner&gt;&lt;/div&gt;
      &lt;div km-inner&gt;&lt;/div&gt;
      &lt;!-- ... --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I declared them as follows. Please note that inner directive requires outer's controller:</p>
  
  <pre><code>app.directive('kmOuter', function () {
      return {
          restrict: 'AC',
          scope: null,
          controller: function ($scope) {
              this.childAdded = function () {
                  console.log('Child added.');
              };
          }
      };
  });
  
  app.directive('kmInner', function () {
      return {
          restrict: 'AC',
          require: '^kmOuter',
          template: '&lt;div&gt;Lorem ipsum&lt;/div&gt;',
          link: function (scope, elem, attrs, kmOuterController) {
              kmOuterController.childAdded();
          }
      };
  });
  </code></pre>
  
  <p>That works just fine (<code>.childAdded()</code> is being called, among others). Now, I want to dynamically insert new instances of inner directive. This action is being triggered from some third, unrelated directive:</p>
  
  <pre><code>app.directive('kmChildAdder', function ($compile) {
      return {
          restrict: 'AC',
          scope: {
              target: '@kmChildAdder'
          },
          link: function (scope, elem) {
              console.log(scope);
              var target = document.querySelector(scope.target);
  
              angular.element(elem[0]).bind('click', function () {
                  // Error is here
                  var newInner = $compile('&lt;div km-inner&gt;&lt;/div&gt;')(scope)[0];
                  target.appendChild(newInner);
              });
          }
      };
  });
  </code></pre>
  
  <p>Used like this:</p>
  
  <pre><code>&lt;button km-child-adder="[km-outer]"&gt;Add child&lt;/button&gt;
  </code></pre>
  
  <p>But it breaks with the following message:</p>
  
  <pre><code>Error: [$compile:ctreq] Controller 'kmOuter', required by directive 'kmInner', 
  can't be found!
  </code></pre>
  
  <p><code>.childAdded()</code> isn't called anymore.</p>
  
  <p>How can I fix this? Or maybe this design is itself broken and I should reorganise my code?</p>