[解決済み] コントローラでの angular-translate の正しい使用法

質問

私は angular-translate を使っています。

アプリケーションのビューごとに、専用のコントローラがあります。以下のコントローラで、ページタイトルとして表示する値を設定しています。

コード

HTML

<h1>{{ pageTitle }}</h1>

JavaScript

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = $filter('translate')('HELLO_WORLD');
    }])

.controller('SecondPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
        $scope.pageTitle = 'Second page title';
    }])

翻訳ファイルの読み込みは angular-translate-loader-urlを使用しています。 拡張子を使用しています。

問題点

最初のページロード時に、翻訳キーがそのキーの翻訳ではなく、表示されます。翻訳キーは Hello, World! ですが、表示されているのは HELLO_WORLD .

2回目にそのページにアクセスすると、すべてがうまくいき、翻訳されたバージョンが表示されます。

この問題は、コントローラが値を $scope.pageTitle .

備考

を使用する場合 <h1>{{ pageTitle | translate }}</h1> と $scope.pageTitle = 'HELLO_WORLD'; を指定すると、一回目から翻訳が完璧に動作します。この問題は、常に翻訳を使用したいわけではないことです（例えば、2番目のコントローラでは、生の文字列を渡したいだけです）。

質問

これは既知の問題/制限事項ですか？どうすれば解決できますか。

どのように解決するのですか？

編集 : PascalPrecht (angular-translateの作者)の回答で、より良い解決策を参照してください。

読み込みが非同期であることが問題の原因です。ご存知のように {{ pageTitle | translate }} であれば、Angularは式を監視し、ローカライズデータが読み込まれると式の値が変化し、画面が更新されます。

ということは、自分でできるんですね。

.controller('FirstPageCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.$watch(
        function() { return $filter('translate')('HELLO_WORLD'); },
        function(newval) { $scope.pageTitle = newval; }
    );
});

しかし、これはダイジェストサイクルごとにウォッチされた式を実行することになります。これは最適ではなく、目に見えるパフォーマンス低下を引き起こすかもしれませんし、引き起こさないかもしれません。いずれにせよ、これはAngularが行うことなので、それほど悪いことではありません...