<!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" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <!-- Angular Stuff -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-translate/2.6.1/angular-translate.js"></script>
    <!-- App -->
    <script src="app.js"></script>
  </head>

  <body ng-controller="AppController as app">
    <div class="container">
      
      <h3>Straight Angular <small>without i18n</small></h3>
      <div>Interpolation : Hello {{ name }}</div>
      <div>ng-bind       : Hello <span ng-bind="name"></span>
      </div>
      
      <h3>Using ng-translate <small>standard</small></h3>
      <div>Interpolation : <span translate>WELCOME-INTERPOLATE</span>&lt;-- <span class="label label-danger">FAIL</span> because no value</div>
      <div>Interpolation (+ value): <span translate translate-value-name="{{name}}">WELCOME-INTERPOLATE</span>
      </div>
      <div>ng-bind       : <span translate translate-value-name="{{name}}">WELCOME-BIND</span>&lt;-- <span class="label label-danger">FAIL</span> because inner no compile</div>
      
      <h3>Using ng-translate <small>with translate-compile</small></h3>
      <div>Interpolation : <span translate translate-compile>WELCOME-INTERPOLATE</span>&lt;-- <span class="label label-danger">FAIL</span> because no value</div>
      <div>Interpolation (+ value) : <span translate translate-compile translate-value-name="{{name}}">WELCOME-INTERPOLATE</span></div>
      <div>ng-bind       : <span translate translate-compile>WELCOME-BIND</span>
      </div>
      
    </div>
  </body>

</html>

angular-translate latest template
// 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}}",
      'WELCOME-BIND': 'Hello <span ng-bind="name"/>',
      'WELCOME-INTERPOLATE': 'Hello {{ name }}'
    });
    $translateProvider.translations('de', {
      'hello': "Hallo!",
      'subtitle': 'Hier läuft gerade Angular JS v{{ajsVersion}} und angular-translate v{{translateVersion}}!',
      'text': "Dein Browser ist: {{browser}}",
      'WELCOME-BIND': 'Hello <span ng-bind="name"/>',
      'WELCOME-INTERPOLATE': 'Hello {{ name }}'
    });
    $translateProvider.preferredLanguage("en");
  }
]);

app.controller('AppController', function ($rootScope, $scope, $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;
              });
  };
  
  //
  $scope.name = 'Angular';
  
});