Edit Example

HTML

<!DOCTYPE html>
<div ng-app ng-controller="myCtrl" class="container">Double-click on the items below to edit:
    <button type="button" ng-click="newItem()">Add item</button>
        <table>
        <tr> 
            <td>
                <span ng-hide="item.editing[1]" ng-dblclick="editItem(1)">{{items[0].name}}</span>
                <input ng-show="item.editing[1]" ng-model="items[0].name" ng-blur="doneEditing(1)" autofocus />
            </td>
        </tr>
        </table>
</div>

CSS

.container {
    margin-top:10px;
    font-family:arial;
}
input:focus {
    //change more attributes, if you want.
}
input {
    border:none;
    background-color:transparent;
}
.container header {
    padding-bottom:20px;
    border-bottom:1px solid black;
}
ul, input, .container {
    padding:10px;
}

JavaScript

function myCtrl($scope) {

    $scope.items = [{
        name: "item #1",
        editing: false
    }, {
        name: "item #2",
        editing: false
    }, {
        name: "item #3",
        editing: false
    }];
    $scope.item={};
    $scope.item.editing =[];
    $scope.editItem = function (index) {
        $scope.item.editing[index] = true;
    }

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