Получить исходный включенный контент в директиве angular

Моя цель — создать директиву editable, которая позволит пользователю редактировать HTML любого элемента, к которому прикреплен атрибут (см. Plunker: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6)

Это почти работает, за исключением того, что я не могу получить исходный необработанный HTML-код включенного контента для инициализации текстовой области. Я могу получить его текст из clone.text(), но в нем отсутствуют теги HTML, такие как <H1>, <div> и т. д., поэтому нажатие кнопки «Применить» без изменений не является идемпотентным.

Метод clone.html() выдает ошибку, Cannot read property 'childNodes' of undefined

app.directive("editable", function($rootScope) {
  return {
    restrict: "A",
    templateUrl: "mytemplate.html",
    transclude: true,
    scope: {
      content: "=editContent"
    },

    controller: function($scope, $element, $compile, $transclude, $sce) {

      // Initialize the text area with the original transcluded HTML...
      $transclude(function(clone, scope) {

        // This almost works but strips out tags like <h1>, <div>, etc.
        // $scope.editContent = clone.text().trim();

        // this works much better per @Emmentaler, tho contains expanded HTML
        var html = ""; 
        for (var i=0; i<clone.length; i++) {
            html += clone[i].outerHTML||'';}
        });
        $scope.editContent = html;

      $scope.onEdit = function() {
        // HACK? Using jQuery to place compiled content 
        $(".editable-output",$element).html(
          // compiling is necessary to render nested directives
          $compile($scope.editContent)($rootScope)
        );
      }

      $scope.showEditor = false;

      $scope.toggleEditor = function() {
        $scope.showEditor = !$scope.showEditor;
      }         
    }
  }
});

(Этот вопрос, по сути, полностью переписывает вопрос и код после более ранней попытки сформулировать вопрос, Получить исходный включенный контент в директиве Angular)