angularjs translate dropdown list from i18n using ng-repeat
<p>My English language i18n translation json file <code>assets/i18n/en.json</code> is like the following (this is the english translation, I have several other files for other languages in the same directory):</p>

<pre><code>{
  "project": {
    "SPONSORINFO": {
      "MAIN" : "Select the Sponsor Name",
      "SPONSORLIST": [
        {"spons" :"SponsorName 1" },
        {"spons" :"SponsorName 2" }
      ]
    }
  }
}
</code></pre>

<p>and here is my html view:</p>

<pre><code>&lt;div class="form-group" &gt;
    &lt;label for="form-field-select-1" translate="project.SPONSORINFO.MAIN"&gt;
    &lt;/label&gt;
    &lt;select class="form-control"  ng-model="myModel.sponsors"&gt;
        &lt;option ng-repeat="s in spons.SPONSORLIST" value="{{s.spons}}"&gt;{{s.spons}}&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>The <code>translate="project.SPONSORINFO.MAIN"</code> in the <strong>label</strong> is rightly showing the value  <strong>"Select the Sponsor Name"</strong> . No problem on this part.</p>

<h2>Question:</h2>

<p><strong>How to ng-repeat the items in the list of SPONSORLIST in the dropdown menu?</strong><br />
what I currently have is not showing anything as you can guess.</p>

<h2>edit :</h2>

<p>I have a global config in my main.js like the following:</p>

<pre><code>app.config(['$translateProvider',
function ($translateProvider) {

    // prefix and suffix information  is required to specify a pattern
    // You can simply use the static-files loader with this pattern:
    $translateProvider.useStaticFilesLoader({
        prefix: 'assets/i18n/',
        suffix: '.json'
    });

    // Since you've now registered more then one translation table, angular-translate has to know which one to use.
    // This is where preferredLanguage(langKey) comes in.
    $translateProvider.preferredLanguage('en');

    // Store the language in the local storage
    $translateProvider.useLocalStorage();

}]);
</code></pre>

<p>but I don't have any references in my view controller regarding the translation.</p>

<h2>edit 2:</h2>

<p>sorry, I forgot to share that in my mainCtrl.js, I have the following which is loaded with my <code>index.html</code>:</p>

<pre><code>app.controller('AppCtrl', ['$rootScope', '$scope', '$state', '$translate', 
function ($rootScope, $scope, $state, $translate) {

    $scope.language = {
        // Handles language dropdown
        listIsOpen: false,
        // list of available languages
        available: {
            'en': 'English',
            //'it_IT': 'Italiano',
            'de_DE': 'Deutsch'
        },
        // display always the current ui language
        init: function () {
            var proposedLanguage = $translate.proposedLanguage() || $translate.use();
            var preferredLanguage = $translate.preferredLanguage();
            // we know we have set a preferred one in app.config
            $scope.language.selected = $scope.language.available[(proposedLanguage || preferredLanguage)];
        },
        set: function (localeId, ev) {
            $translate.use(localeId);
            $scope.language.selected = $scope.language.available[localeId];
            $scope.language.listIsOpen = !$scope.language.listIsOpen;
        }
    };

    $scope.language.init();
</code></pre>

<h2>update 2 (proposed solution but not working):</h2>

<p>in my view controller, when I manually, load the <code>en.json</code> file, my dropdown menu works.</p>

<pre><code>$http.get('assets/i18n/en.json').success(function(data) {
     $scope.projectJSON = data;
});
</code></pre>

<p>using ng-repeat:</p>

<pre><code>&lt;option ng-repeat="s in projectJSON.project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}"&gt;{{s.spons | translate}}&lt;/option&gt;
</code></pre>

<p>but I don't know how to load the selected language from the environment so that it automatically loads the prefered language file. My attempt is the following but not working:</p>

<pre><code>$scope.language.selected = function (localeId) {
$translate.use(localeId);
    $http.get('assets/i18n/'+localeId+'.json').success(function(data) {
        $scope.projectJSON= data;
    });
};
</code></pre>

<h2>PROPOSED ANSWER (not efficient):</h2>

<pre><code>var lang = $translate.use();
$http.get('assets/i18n/'+lang+'.json').success(function(data) {
    $scope.projectJSON= data;
});
</code></pre>

<p><strong>now the question is:</strong><br />
this solved my problem but when I change the language, the menus and other translations which use mainCtrl.js to translate, by using <code>translate="project.SPONSORINFO.MAIN"</code> as is the case with my <code>label</code>in the above example, they get updated immediately. However, when I use my function to load the selected language and pass it into the <code>$http</code> function to load the selected language file, the menus don't get changed to the selected language immediately, I need to refresh the page and then they are translated.<br /></p>

<p>How can I fix this bug? How can I NOT pass through this function and use it from the <code>mainCtrl.js</code> as the <code>label</code> is using?</p>