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 ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <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: circle;
}
li {
    margin-left: 20px;
}

JavaScript

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {

$scope.tree = [
               {
                 name: "Node", 
                 text : [
                 {
                     str : "First Node-1",
                     parent:[]
                 },
                 {
                     str : "Second Node-1",
                     parent:[]
                 }],
                 nodes: []
              }];


    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        var obj = 
        {
           name: newName,
           text : [
                 {
                     str : "First " + newName,
                     parent:[]
                 },
                 {
                     str : "Second " + newName,
                     parent:[]
                 }],
           nodes: []
        };
        obj.parent = { current : data.text ,parent : parent.parent ? parent.parent : null };
        data.nodes.push(obj);
        console.log($scope.tree);
        //data.nodes.push({name: newName,nodes: []});
    };
    
}]);