petebacondarwin/index.html

## index.html
<!DOCTYPE html>
<html ng-app="roydor">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS test</title>
    <script src="angular.js"></script>
  </head>

  <body>
    <script>
      var roydorContainerDirective = function() {
        return {
          restrict: 'E',
          transclude: true,
          replace: true,
          template: '<div></div>',
          link: function($scope, $element, $attrs, ctrl, $transclude) {
            var newScope = $scope.$new();

            var element = $transclude(newScope, function(clone, clonedScope) {
              $element.empty();
              $element.append(clone);
            });
            newScope.$on('$destroy', function() {
              $element.empty();
            });
          }
        };
      };

      // much like groups.instanceGroupsInputRows.directive
      var roydorContentDirective = function() {
        return {
          restrict: 'E',
          controller: function() {},
          controllerAs: 'ctrl',
          bindToController: true,
          template: '<section ng-if="::!ctrl.partOne"></section>',
        };
      };

      var roydorModule = angular.module('roydor', []);
      roydorModule.directive('roydorContent', roydorContentDirective);
      roydorModule.directive('roydorContainer', roydorContainerDirective);

      roydorModule.run(function($rootScope, $compile) {
        try {
          for (var i = 0; i < 200000; i++) {
            var $parentScope = $rootScope.$new();

            var element = $compile('<roydor-container><roydor-content></roydor-content></roydor-container>')($parentScope);

            if (i % 10000 == 0) {
              console.log(i, new Date());
            }
            $parentScope.$destroy();
          }
        } catch(e) {
          console.log(i);
          console.log(e.stack);
        }
        console.log('done');
      });
    </script>
  </body>

</html>
	<!DOCTYPE html>
	<html ng-app="roydor">

	<head>
	<meta charset="utf-8" />
	<title>AngularJS test</title>
	<script src="angular.js"></script>
	</head>

	<body>
	<script>
	var roydorContainerDirective = function() {
	return {
	restrict: 'E',
	transclude: true,
	replace: true,
	template: '<div></div>',
	link: function($scope, $element, $attrs, ctrl, $transclude) {
	var newScope = $scope.$new();

	var element = $transclude(newScope, function(clone, clonedScope) {
	$element.empty();
	$element.append(clone);
	});
	newScope.$on('$destroy', function() {
	$element.empty();
	});
	}
	};
	};

	// much like groups.instanceGroupsInputRows.directive
	var roydorContentDirective = function() {
	return {
	restrict: 'E',
	controller: function() {},
	controllerAs: 'ctrl',
	bindToController: true,
	template: '<section ng-if="::!ctrl.partOne"></section>',
	};
	};

	var roydorModule = angular.module('roydor', []);
	roydorModule.directive('roydorContent', roydorContentDirective);
	roydorModule.directive('roydorContainer', roydorContainerDirective);

	roydorModule.run(function($rootScope, $compile) {
	try {
	for (var i = 0; i < 200000; i++) {
	var $parentScope = $rootScope.$new();

	var element = $compile('<roydor-container><roydor-content></roydor-content></roydor-container>')($parentScope);

	if (i % 10000 == 0) {
	console.log(i, new Date());
	}
	$parentScope.$destroy();
	}
	} catch(e) {
	console.log(i);
	console.log(e.stack);
	}
	console.log('done');
	});
	</script>
	</body>

	</html>