title: How to show translations using Angular-Translate?
body: <p>Angular-translate in combination with partial-loader only shows the key and not the actual translation. I've tried everything but can't seem to locate the mistake. No errors are logged.</p>
  
  <p>This is my code:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('myapp', [
    'ngRoute',
    'appRoutes', 
    'pascalprecht.translate',
    'angularTranslate',
    'HomeCtrl'
  ]); 
  
  angular.module('angularTranslate', ['pascalprecht.translate'])
    .config(function($translateProvider, $translatePartialLoaderProvider ) {
      $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: '/languages/{lang}/{part}.json'
      });
  
    $translateProvider.preferredLanguage('nl');
  
  });
  </code></pre>
  
  <p>So the templates are loaded from /languages/{lang}/{part}.json</p>
  
  <p><strong>HomeCtrl.js</strong></p>
  
  <pre><code>angular.module('HomeCtrl', []).controller('HomeController', 
    function($scope, $translate, $translatePartialLoader) {
  
      $translatePartialLoader.addPart('home');
      $translate.refresh();
  
  });
  </code></pre>
  
  <p>In Express I have this route to ensure that the files are actually returned instead of routed to Angular:</p>
  
  <pre><code>app.get('/languages/:lang/:part', function(req, res) {
   res.sendFile(req.params.lang + '/' + req.params.part, { root: '././languages' });
  });
  </code></pre>
  
  <p><strong>home.json</strong></p>
  
  <pre><code>{
      "HOMETITLE" : "Geweldige Whatsapp gesprekken.",
  }
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>{{ "HOMETITLE" || translate }}
  </code></pre>
  
  <p>And finally I have linked everything in index.html using this order:</p>
  
  <pre><code>&lt;script src="../libs/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="../libs/angular-route/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="../libs/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script src="../libs/angular-translate/angular-translate.js"&gt;&lt;/script&gt;
  &lt;script src="../libs/angular-translate-loader-partial/angular-translate-loader-partial.js"&gt;&lt;/script&gt;
  
  &lt;script src="../js/controllers/HomeCtrl.js"&gt;&lt;/script&gt;
  &lt;script src="../js/appRoutes.js"&gt;&lt;/script&gt;
  &lt;script src="../js/index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>So to restate my problem: only HOMETITLE is displayed instead of the correct translation. Any help is greatly appreciated!</p>