Edit in JSFiddle

var app=angular.module('inplaceTest', ['ui']);
//Include angular-ui dependency in resources on the side and as 'ui'
app.directive('editable', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=model',
            defaultValue: '@defaultval',
            removeFn: '=onDelete'
        },
        templateUrl:'editable-template',
        controller: function($scope) {},
        // The linking function will add behavior to the template
        link: function(scope, element, attrs) {
            scope.editorEnabled = false;

            scope.unEdit = function($event) {
                scope.model = angular.copy(scope.editModel);
                scope.editorEnabled = false;
                if ($event != null) $event.preventDefault();
            };

            scope.enableEditor = function() {
                scope.editModel = angular.copy(scope.model);
                scope.editorEnabled = true;
                // The element enable needs focus and we wait for milliseconds before allowing focus on it.
                timer = setTimeout(function() {
                    element.find('input').focus().select();
                }, 100);
            };
        }
    }
});

app.controller('MyCtrl',function($scope) {
    $scope.heading = "";
});

app.filter('default', function() {
    return function(input, value) {
      return out =
        input != null && input != undefined && (input != "" || angular.isNumber(input)) ?
          input : value || '';
    }
  }
);

<div ng-app="inplaceTest">
  <div ng-controller="MyCtrl">
      <h1>
      <editable model="heading" on-delete="" defaultval="Default val">
          </h1>
          
      </editable>
      <p>
      <span>Heading: {{heading}}</span>
  </div>


<script type="text/ng-template" id="editable-template">
    <span>
    <span class="c1" ng-hide="editorEnabled" ng-click="enableEditor();">{{model | default:'Default Heading.'}}</span>
    <input ng-show="editorEnabled" ng-model="editModel" ng-required ui-keypress="{13: 'unEdit()'}" ui-event="{'blur': 'unEdit()'}"/> 
    </span>
</script>
</div>