title: Angular UI grid - Translate grid on fly
body: <p>I am using angular ui-grid. I want to translate the grid on fly. For example my current language is English. The grid gets rendered in English. Now I switch to french. I want all my menu options to be translated to french. How can I achieve this? This is my link to plunkr.</p>
  
  <p><a href="http://plnkr.co/edit/tpdNYirUEIF3RL0kf2d7?p=preview" rel="nofollow">http://plnkr.co/edit/tpdNYirUEIF3RL0kf2d7?p=preview</a></p>
  
  <p>Here is my sample code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="app"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/csv.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"&gt;&lt;/script&gt;
      &lt;script src="http://ui-grid.info/release/ui-grid-unstable.js"&gt;&lt;/script&gt;
      &lt;script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="main.css" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div ng-controller="MainCtrl"&gt;
        &lt;select ng-model="lang" ng-options="l for l in langs"&gt;&lt;/select&gt;&lt;br&gt;
  
        &lt;div ui-i18n="{{lang}}"&gt;
           &lt;p&gt;Using attribute:&lt;/p&gt;
           &lt;p ui-t="groupPanel.description"&gt;&lt;/p&gt;
           &lt;br/&gt;
           &lt;p&gt;Using Filter:&lt;/p&gt;
           &lt;p&gt;{{"groupPanel.description" | t}}&lt;/p&gt;
  
           &lt;p&gt;Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. &lt;/p&gt;
  
           &lt;div ui-grid="gridOptions" class="grid"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JS</p>
  
  <pre><code>var app = angular.module('app', ['ngTouch', 'ui.grid', 'pascalprecht.translate']);
  
  app.controller('MainCtrl', ['$scope', 'i18nService', '$http', '$translate','$rootScope', function ($scope, i18nService, $http, $translate,$rootScope) {
      $scope.langs = i18nService.getAllLangs();
      $scope.lang = 'en'
  
      $scope.gridOptions = {
        columnDefs: [
          { displayName: 'NAME', field: 'name', headerCellFilter: 'translate' },
          { displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
          { displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false  }
        ]
      };
      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }]);
  
  app.config(function ($translateProvider) {
    $translateProvider.translations('en', {
      GENDER: 'Gender',
      NAME: 'Name',
      COMPANY: 'Company'
    });
    $translateProvider.translations('de', {
      GENDER: 'Geschlecht',
      NAME: 'Name',
      COMPANY: 'Unternehmen'
    });
    $translateProvider.preferredLanguage('en');
  });
  </code></pre>
  
  <p>The first screenshot refers to default language English. When I change my language to 'de' the grid menu options don't get translated. How can I make this happen?
  <a href="https://i.stack.imgur.com/Kpvv0.png" rel="nofollow"><img src="https://i.stack.imgur.com/Kpvv0.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/DKdnz.png" rel="nofollow"><img src="https://i.stack.imgur.com/DKdnz.png" alt="enter image description here"></a></p>