Angular Iframe directive

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js"></script>
<div ng-app='frames' ng-controller='Frames' ng-show="false">
    <button ng-click="add_frames()">add 300 iframes</button>
    <button ng-click="clear_frames()">clear</button>
    <h2>total frames: {{ iframes.length }}</h2>

    <div ng-repeat="frame in iframes">
        <ftw-iframe>asd</ftw-iframe>
    </div>
</div>

JavaScript

var mod = angular.module('frames', []);

mod.controller('Frames', function($scope) {
    $scope.iframes = [{name: 'a'}, {name: 'b'}, {name: 'c'}];

    $scope.add_frames = function() {
        for (var i = 0; i < 300; i++) {
            $scope.iframes.push({name: 'iframe #' + i});
        }
    };

    $scope.clear_frames = function() {
        $scope.iframes = [];
    };
});


mod.directive('ftwIframe', ['$compile',function($compile) {
    return {
        restrict: 'E',
        transclude: true,
        scope: true,
        template: '<iframe class="ftw-iframe"></iframe>',
        compile: function(element, attributes) {
            return {
                pre: function(scope, element, attributes, controller, transcludeFn) {
                    element = element.find('iframe').contents().find('body');
                    var frame_scope = null;
                    var frame_body = transcludeFn(function(element, scope) {
                        frame_scope = scope;
                        //console.log('got scope ', scope.$id);
                    });
                    scope.$on('$destroy', function() {
                        element.empty();
                        //console.log('destroy scope ', frame_scope.$id);
                        frame_scope.$destroy();
                    });
                    element.append(frame_body);
                },
                post: function(scope, element, attributes, controller, transcludeFn) {}
            };
        },
        controller: function($scope) {}
    };
}]);