title: AngularJS filter depending on asynchronous call
body: <p>I am currently trying to learn how to use Angular and I was tasked with rewriting an existing functional page to use Angular.</p>
  
  <p>One of our core functionalities lies with translating strings with a JavaScript function, however, this translate method is only supposed to be called after the translations strings are loaded into the script, and that loading is done asynchronously.</p>
  
  <p>We currently use callbacks to achieve this behavior, but due to Angular nature (at least in my understanding) my data is displayed as soon as the page is rendered.</p>
  
  <p>I have the to be translated strings, but I wanted to display the translated strings in my table, and for that I tried creating a filter "translate" that would call my existing translate method and return its value. What I believe it's happening is that at the moment the filter gets called, I still don't have the translation strings yet, as they may not be loaded already.</p>
  
  <p>What I expected was to something like {{ object.name | translate }}, where object.name is a to be translated string like "access.granted", to give me the corresponding translation string for a given language, for instance "You were given permission to access this area.".</p>
  
  <p>I am not positive this is the best way to achieve what I want, I haven't had much time to delve deep into angular yet, but one requirement I have is, I cannot change the way translations are dealt with, since we have a huge system already using that code, and the new pages using angular must be fully compatible.</p>
  
  <p>What I have tried: (my current filter code)</p>
  
  <pre><code>function ngTranslate (text, backoff) {
      if (backoff != undefined)
          backoff = 100;
      if (backoff &gt; 5000)
          backoff = 5000;
  
      if (internationalization != undefined &amp;&amp; Object.keys(internationalization.messages).length &gt; 0)
          return translate(text);
  
      setTimeout(function () {
          return ngTranslate(text, backoff * 2);
      }, backoff);
  }
  
  app.filter("translate", function ($log) {
      return function (key) {
          $log.info(key);
          return ngTranslate(key);
      };
  });
  </code></pre>
  
  <p>What I tried to achieve here was verify if the translations strings are already loaded, and if not, try again in a short time, but even after the translation strings loaded, nothing showed on the table.</p>
  
  <p>Here is my table code:</p>
  
  <pre><code>&lt;tr data-ng-repeat="product in productList"&gt;
      &lt;td&gt;{{ product.name | translate }}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Thanks a lot in advance</p>