angular-translate: Asynchronous loading (static-files)

angular.module('myApp', ['pascalprecht.translate']);

angular.module('myApp').config(function ($translateProvider) {

  $translateProvider.useStaticFilesLoader({
    prefix: 'locale-',
    suffix: '.json'
  })
  
   .preferredLanguage('de_DE') 
   .fallbackLanguage('en_US') 
   .registerAvailableLanguageKeys(
        [
            'en_US',
            'de_DE'
        ], {
        'en_US' : 'en', 'en-AS': 'en', 'en-AU': 'en', 'en-BB': 'en', 'en-BE': 'en', 'en-BM': 'en', 'en-BW': 'en', 'en-BZ': 'en', 'en-CA': 'en', 'en-GB': 'en', 'en-GU': 'en', 'en-GY': 'en', 'en-HK': 'en', 'en-IE': 'en', 'en-IN': 'en', 'en-JM': 'en', 'en-MH': 'en', 'en-MP': 'en', 'en-MT': 'en', 'en-MU': 'en', 'en-NA': 'en', 'en-NZ': 'en', 'en-PH': 'en', 'en-PK': 'en', 'en-SG': 'en', 'en-TT': 'en', 'en-UM': 'en', 'en-US': 'en', 'en-US-POSIX': 'en', 'en-VI': 'en', 'en-ZA': 'en', 'en-ZW': 'en',
        'de_DE' : 'de', 'de_AT': 'de', 'de_BE': 'de', 'de_CH': 'de', 'de_DE': 'de', 'de_LI': 'de', 'de_LU': 'de'
    })
 .determinePreferredLanguage();
 console.log($translateProvider.preferredLanguage());
 $translateProvider.use();
  
});

angular.module('myApp').controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  $translate.refresh();
  $scope.switchLanguage = function (key) {
    $translate.use(key);
  };
}]);

angular.module('myApp').directive('useMe', [ '$translate', function ($translate) {
  console.log('load');
  return {
    restrict: 'EA',
    replace: true,
    scope: true,
    link: function (scope, element, attrs) {
      console.log('linked');
    },
    controller: ['$scope','$filter', '$translate',
        function ($scope, $filter, $translate) {
          console.log('controller of directive');
           $translate('HEADLINE').then(function (data) {
              $scope.myvar = data; 
          });
          
    }],
    template: '<div>{{myvar}}</div>'
  }
}]);

<!doctype html>
<html ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
  <script src="https://rawgit.com/PascalPrecht/bower-angular-translate/master/angular-translate.js"></script>
  <script src="https://rawgit.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
  <script src="https://rawgit.com/angular-translate/bower-angular-translate-storage-local/master/angular-translate-storage-local.js"></script>
  <script src="https://rawgit.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.js"></script>
  
  <script src="app.js"></script>
</head>
<body ng-controller="Ctrl">
<h1 translate>HEADLINE</h1>
<use-me></use-me>
<button ng-click="switchLanguage('de_DE')" translate>LANG_DE_DE</button>
<button ng-click="switchLanguage('en_US')" translate>LANG_EN_US</button>
</body>
</html>

/* Put your css in here */

{
 "HEADLINE": "Hello there!",
 "LANG_DE_DE": "Lang: German",
 "LANG_EN_US": "Lang: English"
}

{
 "HEADLINE": "Hallo da!",
 "LANG_DE_DE": "Sprache: Deutsch",
 "LANG_EN_US": "Sprache: Englisch"
}