AngularJS contentditable directive

contenteditable.js

app.directive('edit', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      state: '=state',
    },
    link: function(scope, element, attrs, ngModel) {

      function read() {
        ngModel.$setViewValue(element.text());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue.replace('\\n','<br>') || '');
      };
      
      scope.$watch('state', function(val) {
        element.attr('contenteditable',val);
      });
      
      element.bind('blur keyup change', function(e) {
        scope.$apply(read);
      });

      element.on('keydown', function (event){
        if(element[0].attributes['multiline'] == undefined){
          if(event.which == '13'){
            window.event.cancelBubble = true;
            event.returnValue = false;
          }
        }
      });
    }
  };
});


// how to use 
<span edit state="state.bio" ng-model="user.bio.data.name"></span> 

// for multiline (replacement of textarea)
<span edit state="state.bio" ng-model="user.bio.data.address"></span>