title: Angular - getting ng-bind to work on nested directives
body: <p>I've built a small pattern that recursively creates different sub-directives based on the model. I'm using <code>$compile</code> to build child directives recursively, then append them to the parent.<br>
  The directive building itself seems to work just fine, but for some reason, embedded expressions or <code>ng-bind</code> or interpolation doesn't seem to work on nested directive.</p>
  
  <p>Here's a snippet:</p>
  
  <pre><code>app.directive("child", function ($compile) {
    function getTemplate(depth) {
      if (depth % 2 == 0) {
        return "&lt;even depth='deeper'/&gt;"
      } else {
        return "&lt;odd depth='deeper'/&gt;"
      }
    }
    return {
      scope: {
        depth: "="
      },
      link: function linker($scope, $element) {
        if ($scope.depth == 0) {
          var child = angular.element("&lt;span ng-bind='depth'/&gt;");
          child = $compile(child)($scope);
          $element.append(child);
        } else {
          $scope.deeper = $scope.depth - 1;
          var child = angular.element(getTemplate($scope.depth));
          child = $compile(child)($scope);
          $element.append(child);
        }
      }
    }
  })
  </code></pre>
  
  <p>Basically in this test the directive will recursively dive down until the <code>depth</code> reaches <code>0</code>, then spit out a <code>&lt;span&gt;</code> element.<br>
  The expected result should be a span element with the value of <code>0</code>. But it doesn't seem to evaluate. Using <code>&lt;span&gt;{{depth}}&lt;/span&gt;</code> also results in in a literal html instead of evaluating the contents.<br>
  I'm trying to achieve a result of nested <code>&lt;even&gt;&lt;odd&gt;&lt;even&gt;</code> directives <strong><em>removing</em></strong> the surrounding <code>&lt;child&gt;</code> - directive.</p>
  
  <p>Here's a complete jsFiddle: <a href="https://jsfiddle.net/eg1e1aLz/" rel="nofollow noreferrer">https://jsfiddle.net/eg1e1aLz/</a></p>
  
  <p>The resulting DOM should look like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;test depth="4" class="ng-isolate-scope"&gt;
    &lt;even depth="depth-1" class="ng-scope ng-isolate-scope"&gt;
      &lt;odd depth="depth-1" class="ng-scope ng-isolate-scope"&gt;
        &lt;even depth="depth-1" class="ng-scope ng-isolate-scope"&gt;
          &lt;odd depth="depth-1" class="ng-scope ng-isolate-scope"&gt;&lt;span ng-bind="depth" class="ng-binding ng-scope"&gt;0&lt;/span&gt;&lt;/odd&gt;
        &lt;/even&gt;
      &lt;/odd&gt;
    &lt;/even&gt;
  &lt;/test&gt;</code></pre>
  </div>
  </div>
  </p>