Angular: Empty Fiddle

http://angularjs.org/

by svdoever

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div ng-app="Application" ng-controller="TreeController">
    <script id="paragraphTmpl.html" type="text/ng-template">
        <a class="anchor" ng-attr-id="data.Id"></a>
        <h4 ng-bind="data.Title" />
        <div class="paragraph-text" ng-bind-html="data.Content"></div>
        <div ng-repeat="paragraph in data.Paragraphs" ng-include="paragraphTmpl.html"></div>
    </script>

    <div class="bookchapter">
        <a class="anchor" ng-attr-id="vm.chapter.Id"></a>
        <h3 ng-bind="vm.chapter.Title" />
        <div class="chapter-text" ng-bind-html="vm.chapter.Content"/>
        <div ng-repeat="paragraph in vm.chapter.Paragraphs" ng-include="paragraphTmpl.html"/>
    </div>
</div>

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.vm = {};
    $scope.vm.chapter = {
            "Id": "N7313",
            "Title": "1 Chapter1",
            "Content": "<p>Contents1</p>",
            "Paragraphs": [
                {
                    "Id": "N1.1",
                    "Title": "1.1 Paragraph1.1",
                    "Content": "<p>Content2</p>",
                    "Paragraphs": [
                        {
                            "Id": "N1.1.1",
                            "Title": "1.1.1 Paragraph1.1.1",
                            "Content": "<p>ContentA</p>",
                            "Paragraphs": []
                        },
                        {
                            "Id": "N1.1.2",
                            "Title": "1.1.2 Paragraph1.1.2",
                            "Content": "<p>ContentB.</p>",
                            "Paragraphs": []
                        }
                    ]
                },
                {
                    "Id": "N1.2",
                    "Title": "1.2 Paragraph1.2",
                    "Content": "<p>Content3.</p>",
                    "Paragraphs": []
                }
            ]
        };
}]);