title: Get original transcluded content within angular directive
body: <p>My goal is to create an <code>editable</code> directive that allows a user to edit HTML of any element to which the attribute is attached (see Plunker: <a href="http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6" rel="nofollow noreferrer">http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6</a>)</p>
  
  <p>This <em>almost</em> works except I can't get the original raw HTML of the transcluded content to initialize the text area.  I can get the text of it from <code>clone.text()</code>, but that's missing the HTML tags like <code>&lt;H1&gt;</code>, <code>&lt;div&gt;</code>, etc.  so clicking apply with no edits is not idempotent.</p>
  
  <p>The method <code>clone.html()</code> throws an error, <code>Cannot read property 'childNodes' of undefined</code></p>
  
  <pre><code>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 &lt;h1&gt;, &lt;div&gt;, etc.
          // $scope.editContent = clone.text().trim();
  
          // this works much better per @Emmentaler, tho contains expanded HTML
          var html = ""; 
          for (var i=0; i&lt;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;
        }         
      }
    }
  });
  </code></pre>
  
  <p>(This question is essentially a wholesale rewrite of the question and code after an earlier attempt to frame the question, <a href="https://stackoverflow.com/questions/20032347/get-original-transcluded-content-in-angular-directive">Get original transcluded content in Angular directive</a>)</p>