title: How to instantiate variable before the controllers are loaded
body: <p>I have a simple AngularJS application. I am now trying to implement a L10n* mechanism into it. For that I have service which loads a strings file and returns an array of key-values. These values are later put into views and controllers.</p>
  
  <p>To keep stuff straight and simple I assign the return array to <strong>$rootScope</strong> so that every controller/view has access to the same list.
  I am doing it from the <strong>angular.module(...).run()</strong> function</p>
  
  <p>And this is where the problem starts - some controllers can access the $rootScope object, whilst some other cant (and return undefined). I suspect this is because the promise is not resolved in time before the first few controllers are loaded.</p>
  
  <p><em>The question is - how do I make the controllers wait for the resource to be loaded?</em></p>
  
  <p>Auxiliary question - Why can <em>GenericListController</em> use $scope.localisation but <em>ListController</em> cant? </p>
  
  <p><strong>service declaration</strong></p>
  
  <pre><code>app.factory("StringsTranslationService", function($http) {
  
      var getData = function(locale) {
  
          return $http({method:"GET", url:'public/resources/strings_'+locale+'.txt'}).then(function(result){
              return result.data[0];
          });
      };
      return { getData: getData };
  });
  </code></pre>
  
  <p>load data from service to $rootScope in <strong>app.js</strong></p>
  
  <pre><code>app.run(function($rootScope,StringsTranslationService) {
      var myDataPromise = StringsTranslationService.getData('en');
      myDataPromise.then(function(result) {
          $rootScope.localisation=result;
      });
  });
  </code></pre>
  
  <p>Finally try to use in <strong>controller.js</strong>:</p>
  
  <pre><code>var app=angular.module('myApp');
  
  app.controller('ListController', function ($scope, $controller){
      console.log($scope.localisation["_NAME_"]);
      angular.extend(this, $controller('GenericListController', {$scope: $scope}));
  });
  </code></pre>
  
  <p>The most interesting fact is that <em>GenericListController</em> is also using the same $scope.localisation array and it has not problems with it!</p>
  
  <p>The load order is:</p>
  
  <ol>
  <li>app.js </li>
  <li>service.js </li>
  <li>genericController.js</li>
  <li>controller.js</li>
  </ol>