AngularJS resolve a promise in app.run() before routes can be accessed

var app = angular.module('App', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'MainCtrl',
      templateUrl: 'main.html',
      resolve: {
        init: ['InitService', function(Init) {
          return Init.promise;
        }]
      }
    });
}]);

app.run(['$timeout', 'InitService', '$rootScope', function ($timeout, Init, $rootScope) {
  $timeout(function() {
    $rootScope.msg = "development";
    Init.defer.resolve();
  }, 2000);
}]); 

app.controller('MainCtrl', ['$scope', 'mainService', function ($scope, mainService) {
 // $scope.msg = "Hi there buddy!";
 
 $scope.msg1 = mainService.getMsg();
 
 
 
}]);

app.service('InitService', ['$q', function ($q) {
  var d = $q.defer();
  return {
    defer: d,
    promise: d.promise 
  };
}]);

app.service('mainService', function($rootScope){
  
  return {
    getMsg: function(){
      
      return $rootScope.msg;  
      
    }
  }

});

<!doctype html>
<html ng-app="App">
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  
  The default route will be accessed and will display a message below when init is done:
  
  <div ng-view></div>

  </body>
</html>

<h2>Hi there buddy!</h2>

{{msg1}}