javascript - 異なるビュー間の角度変換

Question

Angularjs Web アプリの開発を開始し、アプリで angular-translate を使用していますが、異なるビューがある場合に angular-translate を使用する最良の方法がわかりません。

アプリに angular-translate-loader-static-files をインストールしました。現在のビューの言語を変更するときに、テンプレートのヘッダーに言語ボタンを表示したいと考えています。ビューは、異なるコントローラーと私の index.html で分離されています。

<div ng-controller='HeaderController'>
<button ng-click="changeLanguage('pt')" translate="BUTTON_LANG_PT"></button>
      <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>

私の翻訳モジュール:

angular.module('elapApp.translate', ['pascalprecht.translate'])

.config(['$translateProvider', function($translateProvider) {
  // configures staticFilesLoader
  $translateProvider.useStaticFilesLoader({
    prefix: 'messages/locale-',
    suffix: '.json'
  });
  // load 'en' table on startup
  $translateProvider.preferredLanguage('pt');
}])
.controller('HeaderController', ['$translate', '$scope', function ($translate, $scope) {

  $scope.changeLanguage = function (langKey) {
    $translate.use(langKey);
  };
}]);

view.html の例:

 <table class="table table-striped table-bordered">
            <thead>
                <th translate>AUTHOR_NAME</th>
                <th translate>AUTHOR_BIOGRAPHY</th>
                <th translate>AUTHOR_WEBSITE</th>
                <th translate>COMMON_ACTION</th>
            </thead>
            <tbody>
                <tr ng-repeat="data in authors">
                    <td>{{data.author_name}}</td>
                    <td>{{data.author_biography}}</td>
                    <td>{{data.author_website}}</td>
                    <td><a href="#/edit-author/{{data.author_id}}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i> Edit Author</a>
                    </td>
                </tr>
            </tbody>
        </table>

そしてビューモジュール：

angular.module('elapApp.authors', ['elapApp.services','ngRoute', 'elapApp.translate'])

.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.when('/', {
        title: 'Authors',
        templateUrl: 'partials/authors/authors.html',
        controller: 'AuthorsCtrl'
      }).when('/authors', {
            templateUrl: 'partials/authors/authors.html',
            controller: 'AuthorsCtrl'
        });
    }
])

.controller('AuthorsCtrl', ['$scope', 'Authors', function($scope, Authors) {
    Authors.getAuthors().then(function(data){
        $scope.authors = data.data;
    });

}]).run(['$location', '$rootScope',
    function($location, $rootScope) {
        $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
            $rootScope.title = current.$$route.title;
        });
    }
]);

したがって、このシナリオでは、言語ボタンをクリックすると、ヘッダーのすべてのデータが言語を正しく変更しますが、私の見解では何も起こりません。この状況でビューの言語を変更するにはどうすればよいですか?

手伝って頂けますか？

ありがとう。ではごきげんよう！