Angular Translation is not available for pagination buttons

Question

I am using angular-translate and partial loader to load my translations. The normal text translation works just fine, however the translation is not visible on the pagination buttons. I have a minimum working demo https://plnkr.co/edit/vNT0nQvBAKZb8RnFpjkE?p=preview.

The pagination directive looks like:

  <ul uib-pagination ng-model="currentPage" 
                  total-items="rows.length" 
                  max-size="maxSize" 
                  boundary-links="true" 
                  first-text="{{'FIRST_TEXT'|translate}}" 
                  previous-text="{{'PREVIOUS_TEXT'|translate}}" 
                  next-text="{{'NEXT_TEXT'|translate}}" 
                  last-text="{{'LAST_TEXT'|translate}}">
  </ul>

Can anyone please have a look if I am missing any configuration?

Thank you.

Answer 1

I have got some tweaks to make your pagination text change on translation. Actually I did nothing on $translate lib, I played along uib pagination DOM manipulation.

Also for the first time to set text it needs a delay.

plnkr : https://plnkr.co/edit/sZ5J2qaqDOLcg76MgicM?p=preview

Changed function:

function NavigationController($scope,$rootScope, $translate, $timeout) {
    $rootScope.refreshPagination = true;
    $timeout(function() {
      $translate.use($translate.use()).then(function(){
        refreshPaginationItems();
      });
    }, 1000);
    $scope.changeLanguage = function (langkey) {
      $translate.use(langkey).then(function(){
        refreshPaginationItems();
      });
    }

    function refreshPaginationItems(){
      $rootScope.refreshPagination = false;
      $timeout(function() {
        $rootScope.refreshPagination = true;
      }, 0);
    }
  }

I have not refactored the code. In case you think the better option please feel free to opt for it.