Angular JS - Inplace Edit inside tree - angularjs

Question

I could not get inplace edit working within a tree.
I forked a fiddle where inplace edit worked within a simple array of input data
Here is the fiddle
http://jsfiddle.net/cguy/wcMzw/8/
thanks for any help.
<script type="text/ng-template" id="tree_item_renderer.html">
<button ng-click="expand_collapse(data)" ng-show="data.show && data.nodes.length > 0">-</button>
<button ng-click="expand_collapse(data)" ng-show="!data.show && data.nodes.length > 0">+</button>
<edit-in-place value="data.name"></edit-in-place>
<ol ng-show="data.show">
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
</ol>
</script>
<div id="tree">
<ol ng-controller="TreeCtrl" >
<li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ol>
</div>
var app = angular.module( 'myApp', [] );
app.directive( 'editInPlace', function() {
return {
restrict: 'E',
scope: { value: '=' },
template: '<span ng-click="edit()" ng-bind="value"></span><input ng-model="value"></input>',
link: function ( $scope, element, attrs ) {
// Let's get a reference to the input element, as we'll want to reference it.
var inputElement = angular.element( element.children()[1] );
// This directive should have a set class so we can style it.
element.addClass( 'edit-in-place' );
// Initially, we're not editing.
$scope.editing = false;
// ng-click handler to activate edit-in-place
$scope.edit = function () {
$scope.editing = true;
// We control display through a class on the directive itself. See the CSS.
element.addClass( 'active' );
// And we must focus the element.
// `angular.element()` provides a chainable array, like jQuery so to access a native DOM function,
// we have to reference the first element in the array.
inputElement[0].focus();
};
// When we leave the input, we're done editing.
inputElement.prop( 'onblur', function() {
$scope.editing = false;
element.removeClass( 'active' );
});
}
};
});
app.controller("TreeCtrl",['$scope', function($scope) {
$scope.expand_collapse = function(data) {
data.show = !data.show;
}
// below is an array of size 1 - it does not have to be that way
$scope.tree = [ {
name : "Root",
show : true,
nodes : []
} ];
var nodeChild1 = {
name : "Child 1",
show : false,
nodes : []
};
var nodeChild2 = {
name : "Child 2",
show : false,
nodes : []
};
// Add the children
$scope.tree[0].nodes.push(nodeChild1);
$scope.tree[0].nodes.push(nodeChild2);
var nodeGrandChild1 = {
name : "Grand Child 1",
show : false,
nodes : []
};
var nodeGrandChild11 = {
name : "Grand Child 11",
show : false,
nodes : []
};
nodeChild1.nodes.push(nodeGrandChild1);
nodeChild1.nodes.push(nodeGrandChild11);
var nodeGrandChild2 = {
name : "Grand Child 2",
show : false,
nodes : []
};
var nodeGrandChild21 = {
name : "Grand Child 21",
show : false,
nodes : []
};
nodeChild2.nodes.push(nodeGrandChild2);
nodeChild2.nodes.push(nodeGrandChild21);
} ]);

Answer 1

There were some extra Controller tags in my original fiddle.
Now it works - here is the updated fiddle.
http://jsfiddle.net/cguy/wcMzw/9/
<br />
<p>Here we repeat the contacts to ensure bindings work
</p>
<script type="text/ng-template" id="tree_item_renderer2.html">
<button ng-click="expand_collapse(data)" ng-show="data.show && data.nodes.length > 0">-</button>
<button ng-click="expand_collapse(data)" ng-show="!data.show && data.nodes.length > 0">+</button>
{{data.name}}
<ol ng-show="data.show">
<li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer2.html'"></li>
</ol>
</script>
<div id="tree2">
<ol>
<li ng-repeat="data in tree" ng-include="'tree_item_renderer2.html'"></li>
</ol>
</div>

Answer 2

For the 2nd tree in your demo, you missed the directive
<edit-in-place value="data.name"></edit-in-place>