数据树渲染，编辑和保存当前状态

Question

我是angularJS和前端开发的新手。我正在构建一个类似于我在网上找到的数据呈现树：

JSfiddle link

HTML：

    <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>

AngularJS：

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

CSS：

 ul {
        list-style: circle;
    }
    li {
        margin-left: 20px;
    }

唯一的区别是我需要用户能够从界面编辑节点名称。应该可以将当前状态存储在本地存储中并从中读取。