angular input框点击别处 变成不可输入状态

<input type="text" ng-model="edit" ng-disabled="!editable" focus-me="editable" ng-blur="editable=false">
<i class="kb-icon bpos-x0 bpos-y0 pull-right" ng-click="edit($index,$event)" ng-class='editable?"hide":""'></i>
$scope.editable=false;

上面是一个输入框，一开始是初始化是不可编辑状态，点击图标<i>改变编辑状态，当可编辑的时候<i>图标会消失，然后点击其他地方，input框就会自动保存，变回不可编辑状态。这里用到的技术主要是ng-blur，判断input框是否失焦，一旦失去焦点就改变editable为false.

这里的focus-me是一个directive，当变成可编辑状态时，立即获得焦点。

app.directive('focusMe', function () {
  return {
    restrict: 'A',
    scope: {
      focusMe: '='
    },
    link: function (scope, element, attr, ngModel) {
      scope.$watch('focusMe', function (val) {
        if (val) {
          element[0].focus();
        }
      });
    }
  };
});