Uib Pagination dynamic labels issue

by Bruno Sabetta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.15.1/angular-translate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="someController">
    <button type="button" ng-click="change('en')">
      Translate EN
    </button>
    <button type="button" ng-click="change('es')">
      Translate ES
    </button>
    <br/>
    <br/>NEXT: {{ 'NEXT' | translate }}
    <br/> PREVIOUS: {{ 'PREVIOUS' | translate }}
    <hr/>
    <uib-pagination total-items="3" items-per-page="1" ng-model="currentPage" max-size="5" next-text="{{ 'NEXT' | translate }}" previous-text="{{ 'PREVIOUS' | translate }}"></uib-pagination>
  </div>
</div>

JavaScript

var app = angular.module('myApp', [
  'ui.bootstrap',
  'pascalprecht.translate'
]);

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    'NEXT': 'Next',
    'PREVIOUS': 'Previous'
  });
  $translateProvider.translations('es', {
    'NEXT': 'Siguiente',
    'PREVIOUS': 'Anterior'
  });

  $translateProvider.preferredLanguage('en');
});

app.controller('someController', function($scope, $translate) {

  $scope.currentPage = 1;

  $scope.change = function(key) {
    $translate.use(key);
    $translate(['PREVIOUS', 'NEXT']).then(function(translations) {
      $scope.previousText = translations.PREVIOUS;
      $scope.nextText = translations.NEXT;
    });
  }
});