How to execute ng-translate inside select box option in angularjs

Question

How to use ng-translate to translate parameters into a select box.
For example:

Template:

<select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders"> </select> 

Controller:

 $scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}] 

enUS.json:

 { "TXT_MALE": "Male", "TXT_FEMALE": "Female", } 

I tried adding a filter like ng-options="gender.name for gender in genders | translate" but obviously it was adding a filter to the $scope.genders instead of a single element

I tried to write my own filter (I'm new to this)

 filter('translateArrayObj', ['$translate', '_', function($translate, _) { return function(arr) { var arr2 = []; angular.forEach(arr, function (value, key) { $translate(value.name).then(function(translation) { var obj2 = angular.copy(value); obj2.name = translation; obj2.code = value.code; arr2.push(obj2); }); }); return arr2; } }]) 

But I got the following error

 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! 

It seems like a simple task, but it has already taken half of my day, what am I doing wrong :(

Answer 1

You need to apply the filter to gender.name and not to the genders array:

 <select ng-model="me.gender" ng-options="gender.name | translate for gender in genders"></select> 

Here is a demo