Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button class="addchild" ng-click="addChild(data)">Add child</button>
    <button ng-show="data.parent" ng-click="addSibling(data)">Add sibling</button>
    <button class="delete" ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete children</button>
     <div>
         <h3>Division</h3>
	    	Titre division<input type="text" /><br />
			Titre court<input type="text" /><br />
    </div>
    <hr />
    <div><h4>Grain de contenu</h4>
			Titre<input type="text" /><br />
			Titre court<input type="text" /><br />
	    	<h5>Information</h5>
	    	Titre<input type="text" /><br />
	    	<textarea rows="4" cols="70"></textarea>
	    </div>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

CSS

ul {
    list-style: none;
    border-left: 1px dashed #ddd;
}
li {
    margin-left: 20px;
}
button {
  background: #63AE12;
  color: #FFF;
  border: 0;
  font-size: 0.8em;
  margin: 9px;
}
button.addchild {
  background: #3094E7;
}
button.delete {
  background: orange;
}

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.addSibling = function(data) {
        var post = data.parent.nodes.length + 1;
        var newName = data.parent.name + '-' + post;
        data.parent.nodes.push({name: newName,nodes: [], parent: data.parent});
    };
    $scope.addChild = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: [], parent: data});
    };
    $scope.tree = [{name: "Node", nodes: []}];
}]);