How to instantiate variable before the controllers are loaded

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.

To keep stuff straight and simple I assign the return array to $rootScope so that every controller/view has access to the same list. I am doing it from the angular.module(...).run() function

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.

The question is - how do I make the controllers wait for the resource to be loaded?

Auxiliary question - Why can GenericListController use $scope.localisation but 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 { getData: getData };

load data from service to $rootScope in app.js$rootScope,StringsTranslationService) {
    var myDataPromise = StringsTranslationService.getData('en');
    myDataPromise.then(function(result) {

Finally try to use in controller.js:

var app=angular.module('myApp');

app.controller('ListController', function ($scope, $controller){
    angular.extend(this, $controller('GenericListController', {$scope: $scope}));

The most interesting fact is that GenericListController is also using the same $scope.localisation array and it has not problems with it!

The load order is:

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


Instead of copying yr results to $rootScope, you should directly read from service.

why ? Yr $rootScope lives throughout yr application life, it sits right above all yr controller's scope, so its better to keep it lightest.

code :

app.factory("StringsTranslationService", function($http,$q) {

  var StringsTranslationService={};
  var data='';
  var dataReady=false;

  StringsTranslationService.getData = function (locale) {

    var deferred= $q.defer();
    return deferred.promise;


 return StringsTranslationService;

Update yr{

   //call service & read data

          //if you really want it add to rootScope
          //handle error here


Inside yr controller check if data is ready & then read

app.controller('ListController', function ($scope, StringsTranslationService){

    else {


This way you will only do a single call to fetch data & it will b available across app.

Need Your Help

How to validate fields appended with id on cakephp

php cakephp-2.0

I have my form fields where I am appending an id within a for loop.

How to make DPFBannerView in UITableview did not scroll

ios objective-c uitableview scroll admob

i am new in Google admob development. In this case i need to add an admob inside my uitableview, I make an implementation like this on :

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.