angularjs - How to instantiate variable before the controllers are loaded -

i have simple angularjs application. trying implement l10n* mechanism it. have service loads strings file , returns array of key-values. these values later put views , controllers.

to keep stuff straight , simple assign return array $rootscope every controller/view has access same list. doing angular.module(...).run() function

and problem starts - controllers can access $rootscope object, whilst other cant (and return undefined). suspect because promise not resolved in time before first few controllers loaded.

the question - how make controllers wait resource loaded?

auxiliary question - why can genericlistcontroller use $scope.localisation listcontroller cant?

service declaration

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 }; }); 

load data service $rootscope in app.js

app.run(function($rootscope,stringstranslationservice) {     var mydatapromise = stringstranslationservice.getdata('en');     mydatapromise.then(function(result) {         $rootscope.localisation=result;     }); }); 

finally try use in controller.js:

var app=angular.module('myapp');  app.controller('listcontroller', function ($scope, $controller){     console.log($scope.localisation["_name_"]);     angular.extend(this, $controller('genericlistcontroller', {$scope: $scope})); }); 

the interesting fact genericlistcontroller using same $scope.localisation array , has not problems it!

the load order is:

1. app.js
2. service.js
3. genericcontroller.js
4. controller.js

instead of copying yr results $rootscope, should directly read service.

why ? yr $rootscope lives throughout yr application life, sits right above yr controller's scope, better keep lightest.

code :

app.factory("stringstranslationservice", function($http,$q) {    var stringstranslationservice={};   var data='';   var dataready=false;    stringstranslationservice.getdata = function (locale) {      var deferred= $q.defer();     $http({       method:"get",       url:'public/resources/strings_'+locale+'.txt'     })     .success(function(result){       deferred.resolve(result.data[0]);     })     .error(function(error){       deferred.reject(error);     })     return deferred.promise;   };   return stringstranslationservice; }); 

update yr app.run

app.run(function(stringstranslationservice){     //call service & read data     stringstranslationservice.getdata('en')      .then(function(data){           stringstranslationservice.data=data;           stringstranslationservice.dataready=true;            //if want add rootscope           //$rootscope.localisation=data;       },       function(error){           //handle error here       })    }); 

inside yr controller check if data ready & read

app.controller('listcontroller', function ($scope, stringstranslationservice){      if(stringstranslationservice.dataready===false){       $scope.loading=true;     }     else {        $scope.loading=false;        $scope.data=stringstranslationservice.data;     }   }); 

this way single call fetch data & b available across app.