Use of angular-translate-static-files-loader in html

Question

I used angular translate static files loader for translating the content in html. My code works fine when page is loaded it is visible in selected language after loading when i select another language it is not translating.

my html code is:

 <select ng-model="selected" ng-options=" selec.Name for selec in langTable"> </select><br>
       <span ng-bind-html="'world' |translate"></span>

my angular code is:

.config(function($translateProvider){
 $translateProvider.useStaticFilesLoader({
prefix:'assets/',
suffix:'.STRINGS'
 });
 }) 
 .controller( 'Ctrl', function ( $scope,$translate ) {
  $scope.langTable=[{Name:'English',value:"en_US"},{Name:'France',value:"fr_FR"},{Name:'German',value:"pt_BR"}];
  $scope.selected=$scope.langTable[1];
   $translate.use($scope.selected.value);
   console.log($scope.selected.value);
 })

my en_US.STRINGS contains :
 {
 "world": "halooo worlde welcame to our new aPPP",
 "hello":"haloo"
 }

all my .strings file contains the word world!!

Answer 1

You should watch for changing language in select input:

 <select ng-model="selected" ng-options=" selec.value as selec.Name for selec in langTable" ng-change="setLang()"> </select>

and in your controller:

$scope.setLang = function() {
  $translate.use($scope.selected);
};