AngularJS - transclude scope

HTML

<div ng-app="transclude">
  <div ng-controller="Ctrl">
    <pane title="{{title}}">
        <div id="content">
            <div id="content0">{{text}}</div>
            <div id="content1">{{title}}</div>
        </div>
    </pane>
  </div>
</div>

CSS

.ng-invalid { border: 1px solid red; }
.ng-scope { border: 1px solid red; margin: 4px }

JavaScript

function Ctrl($scope, $rootScope) {
  $scope.title = 'My Title';
  $scope.text = 'This is the text of the pane element';
}

angular.module('transclude', [])
 .directive('pane', function($compile){
    return {
      restrict: 'E',
      transclude: true,
      template: '<div style="border: 1px solid black;">' +
         '<div id="transclude0"></div>' +
         '<div id="transclude1"></div>' +
         '</div>',
        controller: function($scope, $compile, $transclude) {
            $scope.transcludes = [];
            $transclude(function(clone, $scope) {
                for (var i = 0; i < clone[1].children.length; i++) {
                    $scope.transcludes.push($compile(clone[1].children[i])($scope));
                }
                console.log($scope.transcludes);
            });
        },
        link: function(scope, element) {
            for (var i = 0; i < scope.transcludes.length; i++) {
                angular.element(document.querySelector('#transclude' + i)).append(scope.transcludes[i]);
            }
           scope.isolate = "I'm the isolate scope";
        }
    };
});