gistfile1.js

function EditInPlaceDirective() {
    return {
      restrict: 'E',
      scope: {
        value: '=',
        fltr: '='
      },
      template: '<span ng-click="edit()" ng-show="!editing">{{ value | fltr}}</span><input ng-model="value" ng-blur="onBlur()" ng-show="editing"/>',
      link: function ($scope, element, attrs) {
        var inputElement = element.find('input');

        // reference the input element
        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;

          // element not visible until digest complete
          // timeout causes this to run after digest
          setTimeout(function() {
            inputElement[0].focus();
          });
        };

        $scope.onBlur = function() {
          $scope.editing = false;
        };
      }
    };
  }