angular-i18n-filter-solution

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

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="DemoController">
    <div class="group">
      <button ng-class="{active: curLang === 'zh'}" ng-click="toggleLang('zh')">中文</button>
      <button ng-class="{active: curLang === 'en'}" ng-click="toggleLang('en')">EN</button>
    </div>
    <div class="jumbotron">
      <h1>{{ 'HELLO' | i  }}</h1>
    </div>
  </body>

</html>

// Code goes here

var i18nDemo = angular.module('i18nDemo', [])
  .value('language', {
    zh: {
      HELLO: '你好，世界！'
    },
    en: {
      HELLO: 'Hello, World!'
    }
  })
  .controller('DemoController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $rootScope.curLang = 'zh';
      $scope.toggleLang = function(lang) {
        $rootScope.curLang = lang;
      };
    }
  ])
  .filter('i', ['$rootScope', 'language',
    function($rootScope, language) {
      var langFilter = function(value) {
        if ($rootScope.curLang === 'zh')
          return language.zh[value];
        return language.en[value];
      };
      // Since AngularJS 1.3, filters which are not stateless (depending at the scope)
      // have to explicit define this behavior.
      langFilter.$stateful = true;
      return langFilter;
    }
  ]);

.group{
  height: 50px;
  text-align: center;
}

button{
    width: 60px;
    height: 30px;
}
.active{
  background-color: gray;
}
.jumbotron{
  border: 1px solid gray;
  text-align: center;
}