title: angular-translate nested JSON and filter
body: <p>When using <a href="https://angular-translate.github.io/" rel="nofollow noreferrer">angular-translate</a> I can filter my strings like so:</p>
  
  <pre><code>&lt;ANY&gt;{{'TRANSLATION_ID' | translate}}&lt;/ANY&gt;
  </code></pre>
  
  <p>It works very well with the following flat JSON:</p>
  
  <pre><code> {
    TRANSLATION_ID: 'A value',
  };
  </code></pre>
  
  <p>However, I can't figure out how to get it to work using nested translations:</p>
  
  <pre><code>&lt;ANY&gt;{{'NAMESPACE.TRANSLATION_ID' | translate}}&lt;/ANY&gt;
  </code></pre>
  
  <p>And the nested JSON:</p>
  
  <pre><code>{
      "NAMESPACE": {
           "TRANSLATION_ID": "A value"
      }
  };
  </code></pre>
  
  <p>I am successfully loading the translation using <code>$translateProvider.useStaticFilesLoader({prefix: 'i18n/locale-', suffix: '.json'});</code>, and I make use of other functions of the provider such as <code>$translateProvider.addInterpolation('$translateMessageFormatInterpolation');</code>.</p>
  
  <p>The <a href="https://angular-translate.github.io/docs/#/guide" rel="nofollow noreferrer">documentation</a> shows examples of nested translation using the <a href="https://angular-translate.github.io/docs/#/guide/03_using-translate-service" rel="nofollow noreferrer">service</a> directly, but not the <a href="https://angular-translate.github.io/docs/#/guide/04_using-translate-filter" rel="nofollow noreferrer">filter</a>.</p>
  
  <p><a href="https://stackoverflow.com/questions/33537395/angular-translate-using-usestaticfilesloader-to-load-nested-json">I found a possibly related issue here</a>.
  First of all, using the code in the JSFifddle breaks the <code>$translateProvider</code> functions (I got it somehow fixed by extending the replacing variable like so: <code>$TranslateProvider = angular.extend(m, $TranslateProvider);</code> after injecting <code>$translateProvider</code> as <code>m</code> and add <code>pascalprecht.translate</code> as a module dependency, and add <code>var</code> declarations to be able to <code>'use strict'</code>) - so right off the bat it doesn't seem to be a solid solution.</p>
  
  <p>With that JSFiddle code, I got the <em>directive</em> to work, at least for non-nested cases (which are fine and all, but not what's needed here, so I didn't bother testing the nested cases) but not the filter (which I need working for both nested and non-nested translations).</p>
  
  <p>It seems to me namespaced translations should be a pretty big deal, and therefore should be available for all the 3 translation methods (service, directive and filter).</p>
  
  <p>"service" method is rather limited ($translate service doesn't provide a two-way data binding which means more code to listen to events - <a href="https://angular-translate.github.io/docs/#/guide/03_using-translate-service#using-$translate-service_things-to-keep-in-mind" rel="nofollow noreferrer">see doc</a> - and, well, the fact that loading all the interface's string translation in the app's controller/service seems to be a pretty bad practice ; views/templates are here for that if I'm not mistaken).</p>
  
  <p>Has anyone found a solution to that, or is that angular-translate nested JSON works only for the service?</p>