title: How to wait for Angular module to load?
body: <p>I'm trying to use i18next (<a href="https://github.com/archer96/ng-i18next" rel="nofollow">https://github.com/archer96/ng-i18next</a>) in my Angular project, but it seems to be loading too slow. This is my setup:</p>
  
  <pre><code>angular.module('jm.i18next').config(['$i18nextProvider', function ($i18nextProvider) {
      $i18nextProvider.options = {
          lng: 'en',
          fallbackLng: 'en',
          preload: ['en'],
          supportedLngs: ['en'],
          resGetPath: '../locales/__lng__.json',
          useCookie: false,
          useLocalStorage: false,
          defaultLoadingValue: ''
      };
  }]);
  
  angular.module('myApp', ['jm.i18next']).controller('MainCtrl', ['$scope', '$i18next', function ($scope, $i18next) {
  console.log($i18next("key"));
  
  setTimeout(function() {
      console.log($i18next("key"));
    }, 1000);
  }]);
  </code></pre>
  
  <p>I have to add a timeout to have a value. Is there a way to make sure i18next is ready when the controller is loaded?</p>
  
  <hr>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I'm trying to group workouts by type, which is translated using $i18next. But this doesnt work, since the view is "ready" before the controller has done the translation.</p>
  
  <pre><code>&lt;select ng-model="workout" ng-options="workout as workout.name group by workout.type for workout in workouts | orderBy: ['type', 'name']"&gt;&lt;/select&gt;
  
  $scope.workouts = [
      {id: 1, name: 'Workout 1', type: $i18next("type1")},
      {id: 25, name: 'Workout 2', type: $i18next("type2")},
    ];
  </code></pre>