angularjs - angular? contenteditableディレクティブを動的に追加しても機能しませんか?

Question

Runnable CODE: 私のコード

ダブルクリックしたときに <div> 要素に contenteditable ディレクティブを動的に追加しようとしています。contenteditable最初に <div> にディレクティブを配置すると、ng-modelまだ機能しますが、それを削除してng-dblclickコールバックで動的に追加すると、ng-model継ぎ目が機能しなくなります。

この Questionのようなものです。

しかし、ここで私の仕事を終わらせる角度に優しい方法は考えられません。どうすればこれを修正できますか?

コード: html

<div ng-app="customControl">
  <form name="myForm" ng-controller="mainControl">

    <!-- Dynamically adding contenteditable directive : doesn't work -->
    <div name="myWidget" ng-model="userContent" ng-click="enableEdit($event)"
      strip-br="true"
      required>Change me!</div>

    <hr>
    <textarea ng-model="userContent"></textarea>

  </form>
</div>

コード：js

angular.module('customControl', []).
controller('mainControl', function($scope) {
    $scope.enableEdit = function(e) {
        $(e.target).attr('contenteditable', '');
    }
})
.directive('contenteditable', function() {
    return {
      restrict: 'A', // only activate on element attribute
      require: '?ngModel', // get a hold of NgModelController
      link: function(scope, element, attrs, ngModel) {
        if(!ngModel) return; // do nothing if no ng-model

        // Specify how UI should be updated
        ngModel.$render = function() {
          element.html(ngModel.$viewValue || '');
        };

        // Listen for change events to enable binding
        element.on('keyup change', function() {
          scope.$apply(read);
        });
        read(); // initialize

        // Write data to the model
        function read() {
          var html = element.html();
          // When we clear the content editable the browser
          // leaves a <br> behind
          // If strip-br attribute is provided then we strip this out
          if( attrs.stripBr && html == '<br>' ) {
            html = '';
          }
          ngModel.$setViewValue(html);
        }
      }
    };
});