<!DOCTYPE html>
<html>

  <head>
    <link href="index.css" rel="stylesheet">
  </head>

  <body ng-app="testApp" ng-controller="testController as ctrl">
    
    <span i18n="foo"></span>
    <span i18n="bar"></span>
    <span i18n="baz"></span>

    <select 
      ng-model="ctrl.language.selected"
      ng-options="language for language in ctrl.language.available"
      ng-change="ctrl.language.onChange()">
    </select>
    
    <script src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="https://rawgit.com/masterakos/angular-localization/master/dist/angular-localization.min.js"></script>
    <script src="index.js"></script>
  </body>

</html>
angular
  .module('testApp', [
    'i18n'
  ])
  .config(['$i18nProvider', function($i18nProvider) {
    $i18nProvider.config({
      language: 'en',
      path: '',
      prefix: 'local',
      type: 'json'
    });
  }])
  .controller('testController', ['$i18n', function($i18n) {
    var vm = this;
    
    vm.language = {
      selected: 'en',
      available: ['en', 'el'],
      onChange: function() {
        $i18n.set(vm.language.selected);
      }
    };
  }])
body {
  background-color: #4d4d4d;
  color: #EEE;
}
{
  "name": "english",
  "translations": {
    "foo": "foo",
    "bar": "bar",
    "baz": "baz"
  }
}
{
  "name": "ελληνικά",
  "translations": {
    "foo": "φοο",
    "bar": "μπαρ",
    "baz": "μπαζ"
  }
}