<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.js"></script>
    <!-- App -->
    <script src="app.js"></script>
  </head>

  <body ng-controller="AppController as app">
    <div class="container">
      <h1 translate="">hello</h1>
      <p translate="" translate-value-ajs-version="{{app.versions.ajs}}" translate-value-translate-version="{{app.versions.translate}}">subtitle</p>
      <button ng-click="app.chooseLanguage('de')" class="btn" ng-class="{'btn-primary': app.currentLanguage === 'de'}">DE</button>
      <button ng-click="app.chooseLanguage('en')" class="btn" ng-class="{'btn-primary': app.currentLanguage === 'en'}">EN</button>
    </div>
  </body>

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

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.translations('en', {
      'hello': "Hello!",
      'subtitle': 'This is running Angular JS v{{ajsVersion}} and angular-translate v{{translateVersion}}!',
      'text': "Your browser is: {{browser}}"
    });
    $translateProvider.translations('de', {
      'hello': "Hallo!",
      'subtitle': 'Hier läuft gerade Angular JS v{{ajsVersion}} und angular-translate v{{translateVersion}}!',
      'text': "Dein Browser ist: {{browser}}"
    });
    $translateProvider.preferredLanguage("en");
    
    $translateProvider.useStaticFilesLoader({
    		prefix: 'l10n/',
    		suffix: '.json'
  		});
  }
]);

app.controller('AppController', function ($rootScope, $translate) {
  
  var _this = this;

  // store the current used version
  this.versions = {
    ajs: angular.version.full,
    translate: $translate.versionInfo()
  };
  
  this.currentLanguage = $translate.use();
  
  // invoke a language change
  this.chooseLanguage = function (lang) {
    $translate.use(lang)
              .then(function (languageId) {
                _this.currentLanguage = languageId;
              });
  };
  
});