<!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.18.1/angular-translate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate-loader-static-files/2.18.1/angular-translate-loader-static-files.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" />
    <!-- App -->
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="AppController as app">
    <div class="container">
      <h1 translate="Page_Heading_Label">hello</h1>
      <p translate="Page_Subtitle_Label" translate-value-ajs-version="{{app.versions.ajs}}" translate-value-translate-version="{{app.versions.translate}}">subtitle</p>
      <p>{{text._1}}  <em>&lt;&lt; Should not be 'Page_Heading_Label'</em></p>
      <p>{{text._2}} <em>&lt;&lt; Should not be 'Page_Heading_Label'</em></p>
      <p>{{text._3}} <em>&lt;&lt; Should not be 'Page_Heading_Label'</em></p>
      <div>
        Choose:
        <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>
        <span>currentLanguage=[{{app.currentLanguage}}]</span>
      </div>
    </div>
    
    <div class="grid--container">
      <div ui-grid='app.gridOptions' class='grid ' id='funeralListGrid' ui-grid-auto-resize='ui-grid-auto-resize'></div>
    </div>
    
    <div>
      <h2>Notes:</h2>
      <ol>
        <li>We start with $translate.use("xx") a psuedo-internationalized resources file</li>
        <li>We invoke $translate.instant("Page_Heading_Label") in the controller to simulate having the controller initialize things like ui-grid columnDefs</li>
        <li>When you click DE or EN, the "after chooseLanguage" is appended to the $translate.instant call</li>
        <li>$translate.instant doesnt seem to work even after the language tables have loaded!</li>
      </ol>
    </div>
  </body>

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

app.config(['$translateProvider',
  function($translateProvider) {
    $translateProvider.useStaticFilesLoader({
      prefix: "resources.", 
      suffix: '.json'
    })
      
    //$translateProvider.preferredLanguage(["xx","en"]);
    $translateProvider.use("xx")

  }
]);

app.filter('isAlive', function ($translate) {
  return function (input) {
    console.log('isAlive input',input);
    //if(!input) return "";
    //var isAlive = input["isAlive"];
    var isAlive = input;
    if(isAlive) {
      return $translate.instant("PageGrid_IsAlive_True")
    } else {
      return $translate.instant("PageGrid_IsAlive_False")
    }
  };
});

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

  // store the current used version
  this.versions = {
    ajs: angular.version.full,
    translate: $translate.versionInfo()
  };
  
  this.text = {};
  $scope.text = this.text;

  this.text._1 = $translate.instant("Page_Heading_Label") + " instant";
  
  this.currentLanguage = $translate.use();

  $rootScope.$on('$translateChangeSuccess', function () {
  _this.text._2 = $translate.instant("Page_Heading_Label") + " within $translateChangeSuccess"
  });
  
  retranslate_3 = function() {
    $translate("Page_Heading_Label").then(function(translated) {
      _this.text._3 = translated + " inside Promise"
    })
  }
  
  retranslate_3();
  
  // invoke a language change
  this.chooseLanguage = function (lang) {
    $translate.use(lang)
              .then(function (languageId) {
                _this.currentLanguage = languageId;
                console.log('using %s language now', $translate.use())
                _this.text._1 = $translate.instant("Page_Heading_Label")+" after chooselanguage"
                _this.text._2 = $translate.instant("Page_Heading_Label")+" after chooselanguage"
                retranslate_3();
              });
  };
  
  console.log('uiGridConstants.ENTITY_BINDING',uiGridConstants.ENTITY_BINDING)
  
  this.gridOptions = {
    enableFiltering: true,
    flatEntityAccess: true,
    fastWatch: true,
    columnDefs: [
      {
        field: "number",
        displayName: "PageGridColumn_Number_Label",
        headerCellFilter: "translate",
        type: "number"
      },
      {
        field: "president",
        displayName: "PageGridColumn_President_Label",
        headerCellFilter: "translate"
      },
      {
        field: "birth_year",
        displayName: "PageGridColumn_BirthYear_Label",
        headerCellFilter: "translate",
        type: "number"
      },
      {
        field: "party",
        displayName: "PageGridColumn_Party_Label",
        headerCellFilter: "translate",
        enableFiltering: true
      },
      {
        displayName: "PageGridColumn_IsAlive_Label",
        headerCellFilter: "translate",
        field: "isAlive",
        cellFilter: 'isAlive',
        filter: {
          term: "",
          id: 'somethingUnique',
          type: uiGridConstants.filter.SELECT,
          selectOptions: [
            {
              "value": true,
              "label": $translate.instant("PageGrid_IsAlive_True")
            },
            {
              "value": true,
              "label": $translate.instant("PageGrid_IsAlive_False")
            }
          ]
        }
      }
    ]
  };
  
  $http.get('https://raw.githubusercontent.com/hitch17/sample-data/master/presidents.json').then(function(resp) {
    console.log(resp.data);
    _this.gridOptions.data = resp.data.map(function(i) { 
      if(!i.death_year) {
        i.isAlive = true;
      } else {
        i.isAlive = !(i.death_year <= 2018)
      }
      return i
    })
    console.log('_this.gridOptions.data', _this.gridOptions.data)
  })

});
{
  "Page_Heading_Label": "Hello!",
  "Page_Subtitle_Label": "This is running Angular JS v{{ajsVersion}} and angular-translate v{{translateVersion}}!",
  "Page_Browser_Label": "Your browser is: {{browser}}",
  "PageGridColumn_Number_Label": "Number",
  "PageGridColumn_President_Label": "President's Name",
  "PageGridColumn_BirthYear_Label": "Birth Year",
  "PageGridColumn_Party_Label": "Party Affiliation",
  "PageGridColumn_IsAlive_Label": "Still Living?",
  "PageGrid_Party_Republican": "Republican",
  "PageGrid_Party_Democratic": "Democratic",
  "PageGrid_Party_Whig": "Whig",
  "PageGrid_IsAlive_True": "living",
  "PageGrid_IsAlive_False": "deceased"
}
{
  "Page_Heading_Label": "Hallo!",
  "Page_Subtitle_Label": "Hier läuft gerade Angular JS v{{ajsVersion}} und angular-translate v{{translateVersion}}!",
  "Page_Browser_Label": "Dein Browser ist: {{browser}}",
  "PageGridColumn_Number_Label": "Nummer",
  "PageGridColumn_President_Label": "Name des Präsidenten",
  "PageGridColumn_BirthYear_Label": "Geburtsjahr",
  "PageGridColumn_Party_Label": "Parteizugehörigkeit",
  "PageGridColumn_IsAlive_Label": "Noch am Leben?",
  "PageGrid_Party_Republican": "Republikanisch",
  "PageGrid_Party_Democratic": "Demokratisch",
  "PageGrid_Party_Whig": "Whig"
}
{
  "Page_Heading_Label": "[Ħęľľő! !!! !!! !!! !!! !!! !!!]",
  "Page_Subtitle_Label": "[Ŧĥįş įş řūʼnʼnįʼnģ Åʼnģūľäř ĴŜ v{{ajsVersion}} äʼnđ äʼnģūľäř-ŧřäʼnşľäŧę v{{translateVersion}}! !!! !!! !!! !!!]",
  "Page_Browser_Label": "[Ÿőūř þřőŵşęř įş: {{browser}} !!! !!!]",
  "PageGridColumn_Number_Label": "[Ńūmþęř !!! !!! !!! !!! !!! !!!]",
  "PageGridColumn_President_Label": "[Přęşįđęʼnŧ'ş Ńämę !!! !!!]",
  "PageGridColumn_BirthYear_Label": "[ßįřŧĥ Ÿęäř !!! !!!]",
  "PageGridColumn_Party_Label": "[Päřŧy Ńƒįľįäŧįőʼn !!! !!!]",
  "PageGridColumn_IsAlive_Label": "[Ŝŧįľľ Ŀįvįʼnģ? !!! !!!]",
  "PageGrid_Party_Republican": "[Ŗępūþľįčäʼn !!! !!!]",
  "PageGrid_Party_Democratic": "[Đęmőčřäŧįč !!! !!!]",
  "PageGrid_Party_Whig": "[Ŵĥįģ !!! !!! !!! !!!]",
  "PageGrid_IsAlive_True": "[ľįvįʼnģ !!! !!! !!! !!! !!! !!!]",
  "PageGrid_IsAlive_False": "[đęčęäşęđ !!! !!! !!! !!! !!! !!! !!! !!!]"
}
.grid--container { padding: 10px; }