title: AngularJS recursive template rendering
body: <p>I just can't get it working. Simplified everything and placed it in fiddle: <a href="http://jsfiddle.net/svdoever/94aQH/1/" rel="nofollow">http://jsfiddle.net/svdoever/94aQH/1/</a>.</p>
  
  <p>I want to render a hierarchical chapter of a book which containg paragraphs, and paragraphs can contain sub-paragraphs.</p>
  
  <p>Code:</p>
  
  <pre><code>angular.module("myApp", []).controller("TreeController", ['$scope', function($scope) {
  $scope.vm = {};
  $scope.vm.chapter = {
          "Id": "N7313",
          "Title": "1 Chapter1",
          "Content": "&lt;p&gt;Contents1&lt;/p&gt;",
          "Paragraphs": [
              {
                  "Id": "N1.1",
                  "Title": "1.1 Paragraph1.1",
                  "Content": "&lt;p&gt;Content2&lt;/p&gt;",
                  "Paragraphs": [
                      {
                          "Id": "N1.1.1",
                          "Title": "1.1.1 Paragraph1.1.1",
                          "Content": "&lt;p&gt;ContentA&lt;/p&gt;",
                          "Paragraphs": []
                      },
                      {
                          "Id": "N1.1.2",
                          "Title": "1.1.2 Paragraph1.1.2",
                          "Content": "&lt;p&gt;ContentB.&lt;/p&gt;",
                          "Paragraphs": []
                      }
                  ]
              },
              {
                  "Id": "N1.2",
                  "Title": "1.2 Paragraph1.2",
                  "Content": "&lt;p&gt;Content3.&lt;/p&gt;",
                  "Paragraphs": []
              }
          ]
      };
  }]);
  </code></pre>
  
  <p>And html:</p>
  
  <pre><code>&lt;div ng-app="Application" ng-controller="TreeController"&gt;
    &lt;script id="paragraphTmpl.html" type="text/ng-template"&gt;
      &lt;a class="anchor" ng-attr-id="data.Id"&gt;&lt;/a&gt;
      &lt;h4 ng-bind="data.Title" /&gt;
      &lt;div class="paragraph-text" ng-bind-html="data.Content"&gt;&lt;/div&gt;
      &lt;!-- Want to loose the div in the repeat as well --&gt;
      &lt;div ng-repeat="paragraph in data.Paragraphs" ng-include="paragraphTmpl.html"&gt;&lt;/div&gt;
    &lt;/script&gt;
  
    &lt;div class="bookchapter"&gt;
      &lt;a class="anchor" ng-attr-id="vm.chapter.Id"&gt;&lt;/a&gt;
      &lt;h3 ng-bind="vm.chapter.Title" /&gt;
      &lt;div class="chapter-text" ng-bind-html="vm.chapter.Content"/&gt;
      &lt;div ng-repeat="paragraph in vm.chapter.Paragraphs" ng-include="paragraphTmpl.html"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I also don't want a div rendered in the repeat as specified in the comment. I know how to do this with knockout, but couldn't find it for AngularJS.</p>
  
  <p>Help would be appreciated.</p>