AngularJS: Inline edit

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/229/artifact/build/pkg/0.10.7-e86bafec/angular-0.10.7-e86bafec.js"></script>
<div ng-controller="Controller">
  <span ng-hide="editMode" ng-click="editMode=true">{{someData}}</span>
  <input type="text" ng-model="someData" ng-show="editMode" ng-model-instant ng-enter="editMode=false" />
</div>

CSS

span {
    cursor: pointer;
}

JavaScript

var app = angular.module('zdam', []);
    
app.directive('ngEnter', function() {
    return function(scope, elm, attrs) {
        elm.bind('keypress', function(e) {
            if (e.keyCode === 13) scope.$apply(attrs.ngEnter);
        });
    };
});

function Controller($scope) {
    $scope.someData = 'initial value';
}