angular delayed controller

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.0-rc2" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
  <div ng-controller="parentCtrl">
    <div delay-controller="myCtrl" delay-controller-promise="pr">
  </div>
    
  </body>

</html>

angular.module('app', [])
.controller('myCtrl', function(){
  console.log('ctrl runs');
  })
.controller('parentCtrl', function($scope){
    $scope.pr = $rootScope.pr;
    debugger;
  })
.directive('delayController', 
  function($controller, $q, $injector) {
      return {
          scope: true,
          link: function(scope, elm, attr) {
              var ctrlName = attr.delayController;
              console.log('directive runs');
              var prom = scope.$eval(attr.delayControllerPromise);
              debugger;
              $q.when(prom).then(function() {
                
                  var ctrl = $controller(attr.delayController, {
                      $scope: scope
                  });
                  elm.children().data('$ngControllerController', ctrl);
              });
          }
      };
    }
  ).run(
    function($rootScope, $timeout, $q){
    console.log('app runs');
    var def = $q.defer();
    $rootScope.pr = def.promise;
    
    $timeout(function(){
      console.log('resolved runs');
      def.resolve();
    }, 500)
  
  });

/* Styles go here */