title: angular translate load json files
body: <p>I have the following problem regarding page translation using <code>angular-translate</code>:</p>
  
  <p>On entry page, the filter shows only ID, but when I click to go other page, it displays the translation.</p>
  
  <p><strong>My configuration code is:</strong></p>
  
  <pre><code>.config(function ($translateProvider) {
  
  $translateProvider.useStaticFilesLoader({
    prefix: 'languages/',
    suffix: '.json'
  });
  $translateProvider.fallbackLanguage('en_US');   
  $translateProvider.determinePreferredLanguage();})
  </code></pre>
  
  <p>But, if set the translation json directly in configuration method, it works.</p>
  
  <pre><code>.config(function ($translateProvider) {       
  $translateProvider.translations('en_US', {
    "USERNAME": "Username",
    "PASSWORD": "Password",
    "JOBS": "Jobs",
    "JOB": "Job",
    "ImageSequenceNumber": "Image Sequence Number",
    "Attach": "Attach",
    "ShareLink": "Share link",
    "HangoutCode": "or hangout code",
    "TakeNewShots": "Take new shots",
    "Shared": "Shared",
    "NoAccountYet": "Don't have account yet?",
    "SignUp": "Sign Up"
  });
  $translateProvider.fallbackLanguage('en_US');
  $translateProvider.determinePreferredLanguage();
    })
  </code></pre>
  
  <p><strong>HTML code:</strong></p>
  
  <pre><code>&lt;input type="text" placeholder = "{{ 'USERNAME' | translate}}" ng-model="data.username"&gt;
  </code></pre>
  
  <p>Thanks in advance for any suggestions!</p>