Translation-Key Overriding

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="//cdn.jsdelivr.net/angular.translate/2.1.0/angular-translate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bower-angular-translate-loader-static-files/2.0.0/angular-translate-loader-static-files.min.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="at">
    <div class="well">
      <h2>{{'TITLE' | translate}} <span style="color:gray;">(overridden by client)</span></h2>
      <h4>
        <span translate="THX"></span>
        <span style="color:gray;">(not overridden by client)</span>
      </h4>
    </div>

  </body>

</html>

// Code goes here
var app = angular.module('at', ['pascalprecht.translate']);

app.config(function ($translateProvider) {
  $translateProvider.useStaticFilesLoader({
    prefix: '',
    suffix: '.json'
  })
  
  //we create fallbacks for each language that we support  
  $translateProvider.fallbackLanguage(['client_EN','TQ_EN']);

  $translateProvider.preferredLanguage('client_EN');
});

app.controller('Ctrl', function ($scope, $translate) {
  
  //
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});

/* Styles go here */

#Angular Translate
Fallback Languages and Translation-Key Overriding

Use-Case: Customer can override keys of language files but if he doesn't override it the default translation is used.

{
  "TITLE": "Hello",
  "THX" : "Thank you very much!"
}

{
  "TITLE": "Hallo Trafalgar"
}