title: Correct use for angular-translate in controllers
body: <p>I'm using <a href="http://angular-translate.github.io/" rel="noreferrer">angular-translate</a> for i18n in an AngularJS application.</p>
  
  <p>For every application view, there is a dedicated controller. In the controllers below, I set the value to be shown as the page title.</p>
  
  <h2>Code</h2>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;h1&gt;{{ pageTitle }}&lt;/h1&gt;
  </code></pre>
  
  <h3>JavaScript</h3>
  
  <pre><code>.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';
      }])
  </code></pre>
  
  <p>I'm loading the translation files using the <a href="https://github.com/PascalPrecht/angular-translate/wiki/Asynchronous-loading" rel="noreferrer">angular-translate-loader-url</a> extension.</p>
  
  <h2>Problem</h2>
  
  <p>On the initial page load, the translation key is shown instead of the translation for that key. The translation is <code>Hello, World!</code>, but I'm seeing <code>HELLO_WORLD</code>.</p>
  
  <p>The second time I go to the page, all is well and the translated version is shown.</p>
  
  <p>I assume the issue has to do with the fact that maybe the translation file is not yet loaded when the controller is assigning the value to <code>$scope.pageTitle</code>.</p>
  
  <h2>Remark</h2>
  
  <p>When using <code>&lt;h1&gt;{{ pageTitle | translate }}&lt;/h1&gt;</code> and <code>$scope.pageTitle = 'HELLO_WORLD';</code>, the translation works perfect from the first time. The problem with this is that I don't always want to use translations (eg. for the second controller I just want to pass a raw string).</p>
  
  <h2>Question</h2>
  
  <p>Is this a known issue / limitation? How can this be solved?</p>