如何使用ui路由器进行角度转换?

以下是我的应用程序的简化代码:

angular
    .module('localeApp', [
      'ngCookies',
      'ui.router',
      'pascalprecht.translate'
    ])
    .config(
      ['$stateProvider','$urlRouterProvider', '$translateProvider',
      function($stateProvider,$urlRouterProvider, $translateProvider) {
        $urlRouterProvider.otherwise('/login');
        $stateProvider
          .state('login', {
            url: '/login',
            templateUrl: 'loginTpl.html'
          })
          .state('welcome', {
            url: '/welcome',
            templateUrl: 'welcomeTpl.html'
          })
          .state('other', {
            url: '/other',
            templateUrl: 'otherTpl.html'
          });

        $translateProvider.useMissingTranslationHandlerLog();// log missing translations
        $translateProvider.useStaticFilesLoader({
            prefix: 'locale-',// path to translations files
            suffix: '.json'// suffix, currently- extension of the translations
        });
        $translateProvider.preferredLanguage('en_US');// is applied on first load
        $translateProvider.useLocalStorage();// saves selected language to localStorage


    }])
    .run(['$rootScope', '$translate', function($rootScope, $translate) {
      $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){
                $translate.refresh();
            });
    }]);

每个语言环境都定义了json文件。例如默认值 locale-en_US.json :

{
  "translate.welcome": "welcome",
  "translate.login": "login",
  "translate.other": "other"
}

和模板 loginTpl.html 页码:

<p>This is {{translate.login | translate}} page</p>

this plunker .

我可以看到json文件已被检索,但它没有被应用。 我肯定我错过了一些明显的东西,但我就是不知道它是什么。。。