How to make a double click editable table in AngularJS way?

Question

Without DOM manipulation, how to make an editable table cell with double click?

I am trying to make it there http://jsfiddle.net/bobintornado/F7K63/35/?

my

Answer 1

I updated the fiddle. Is this how you want to do it?

HTML

    
        {{item.name}}
        
    

JS

$scope.items = [{name: "item #1", editing: false}, 
                {name: "item #2", editing: false}, 
                {name: "item #3", editing: false}];

$scope.editItem = function (item) {
    item.editing = true;
}

$scope.doneEditing = function (item) {
    item.editing = false;
    //dong some background ajax calling for persistence...
};

However you should probably create a directive containing the editable row. And implement the autofocus there, when you dblclick on an item.