How to use pascalprecht translate translation in a select menu to translate available options.

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

<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angular.js@1.4.8"></script>
  <script data-require="pascalprecht-angular-translate@2.7.0" data-semver="2.7.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.7.0/angular-translate.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="Controller">
  <h1>Hello {{author}}</h1>

  <h3>Select via ng-options</h3>
  <select ng-options="translate.instant(item) for item in data" ng-model="selectedItem"></select>
  Selected item: {{selectedItem}}
  
  <br>
  
  <h3>Select via ng-repeat to add a custom element</h3>
  <select ng-model="selectedItem2">
    <option>Additional Item</option>
    <option ng-repeat="interval in data">{{translate.instant(interval)}}</option>
  </select>
  Selected item: {{selectedItem2}}
</body>

</html>

angular.module('app', ['pascalprecht.translate'])

.controller('Controller', function($scope, $translate){
  $scope.data= [
    'TITLE',
    'FOO'
    ];
    
  $scope.author = 'Pascal Precht';
  
  $scope.selectedItem = {};
  
  $scope.translate = $translate;
})

.config(function($translateProvider){
  $translateProvider.translations('en', {
    'TITLE': 'Hello',
    'FOO': 'This is a paragraph.',
    'BUTTON_LANG_EN': 'english',
    'BUTTON_LANG_DE': 'german'
  });
  
  $translateProvider.translations('de', {
    'TITLE': 'Hallo',
    'FOO': 'Dies ist ein Paragraph.',
    'BUTTON_LANG_EN': 'englisch',
    'BUTTON_LANG_DE': 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
})

/* Styles go here */