title: Angular Translate async timing issue with $translateProvider.useStaticFilesLoader
body: <p>I am using the excellent Angular Translate (<code>$translate</code>) directive/service to deal with multiple Locale Languages and since I have multiple locale files I use the convenient <code>$translateProvider.useStaticFilesLoader</code> to load my translation files through a structure of localeAbbr.json, for example <code>en.json</code>, <code>es.json</code>, etc... I built a Plunker to show my open source project and that project uses the locale through Git raw files (pointing to the actual Github repository, meaning not local to the plunker demo). My project is built as a Directive and a Service, I made a small Plunker to show my timing issue with the JSON file loading.</p>
  
  <p>All that to say that it seems <code>$translateProvider.useStaticFilesLoader</code> works <code>asynchronous</code> while I would really need it to be <code>synchronous</code> because by the time the plunker runs, the JSON files are not yet parsed while I already called a <code>$translate.instant()</code> on my messages.</p>
  
  <p>I have a <a href="http://plnkr.co/edit/90g1Lu1J0fHCOJDGG6a8" rel="nofollow">Plunker</a> showing the problem.</p>
  
  <p>And here is part of my quick Service demo:</p>
  
  <pre><code>app.factory('validationService', ['$filter', '$translate', function ($filter, $translate) {
    var service = this;
    var validationSummary = [];
    var errorMessages = [
      'INVALID_ALPHA',
      'INVALID_ALPHA_SPACE',
      'INVALID_ALPHA_NUM',
      'INVALID_BOOLEAN'
    ];
  
    //var $translate = $filter('translate');
  
    for(var i=0, ln=errorMessages.length; i &lt; ln; i++) {
      validationSummary.push({  
        field: i,
        message: $translate.instant(errorMessages[i])
      });
    }
  
    // attach public functions
    service.getValidationSummary = getValidationSummary;
    return service;
  
    // function declaration
    function getValidationSummary() {
      return validationSummary;
    }
  }]);
  </code></pre>
  
  <p>The $translateProvider configuration</p>
  
  <pre><code>app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.useStaticFilesLoader({
      prefix: 'https://rawgit.com/ghiscoding/angular-validation/master/locales/validation/',
      suffix: '.json'
      });
  
      // load English ('en') table on startup
      $translateProvider.preferredLanguage('en').fallbackLanguage('en');
  }]);
  </code></pre>
  
  <p>Call my Service through the Controller:</p>
  
  <pre><code>app.controller("TestController", function($scope, validationService) {
    var vm = this;
    vm.displayValidationSummary = true;
  
    vm.validationSummary = validationService.getValidationSummary();
  });
  </code></pre>
  
  <p>and finally the HTML using the controller:</p>
  
  <pre><code>&lt;div class="alert alert-danger alert-dismissable" ng-show="vm.displayValidationSummary"&gt;
    &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="displayValidationSummary = false"&gt;&amp;times;&lt;/button&gt;
    &lt;h4&gt;&lt;strong&gt;{{ 'ERRORS' | translate }}!&lt;/strong&gt;&lt;/h4&gt;
    &lt;ul&gt;
        &lt;li ng-repeat="item in vm.validationSummary"&gt;{{item.field }}: {{item.message}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since I'm using AngularJS 1.3+, I also found that <code>$translate</code> only gets translated once, so the author suggest to use <code>translateFilter.$stateful = true;</code> and I tried but that doesn't seem to help.</p>
  
  <p>Again here is the <a href="http://plnkr.co/edit/90g1Lu1J0fHCOJDGG6a8" rel="nofollow">Plunker</a></p>
  
  <p>I have been spending weeks on trying to find and code all kind of solution but I never got it to work and I'm really sad of seeing my raw translation code :(</p>
  
  <p>Please Help!!!</p>
  
  <p><b>EDIT</b><br/>
  I realized that my question was not covering everything related to my problem. On top of the translation delay problem, I also have to pass extra arguments and that is a huge problem passing them to the translation anonymous function. By the time the promise is finished, the state of my arguments have already changed. For example:</p>
  
  <pre><code>$translate(validator.message).then(function(translation) {
      // only log the invalid message in the $validationSummary
      addToValidationSummary(formElmObj, translation);
  
      // error Display
      if(!isValid) {
        updateErrorMsg(translation, isValid);
      }else if(!!formElmObj &amp;&amp; formElmObj.isValid) {
        addToValidationSummary(formElmObj, '');
      }
  }, function(data) {
      throw 'Failed to translate' + data;
  });
  </code></pre>