ui-editable.js

'use strict';

(function(app, $, undefined) {

  app.directive('uiEditable', function($sce) {
    return {
      restrict: 'A',
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {

        if (!ngModel) {
          return;
        }

        ngModel.$render = function() {
          return element.html(ngModel.$viewValue);
        };

        element.bind('blur keyup change', function() {
          if (ngModel.$viewValue !== $.trim(element.html())) {
            return scope.$apply(read);
          }
        });

        function read() {

          return ngModel.$setViewValue($.trim(element.html()));
        };
      }
    };
  });

})(angular.module('app'), angular.element);