angular-gettext: interpolate select options

Question

I want to be able to translate the contents in the options of an angular generated dropdown using angular-gettext.

I have two different solutions and none of them work:

In this one i use ng-repeat and have the textKeys in js:

$scope.categories = ['category.Art', 'category.Automotive'];

<select class="form-control" ng-model="category" >
    <option value="{{category}}" ng-repeat="category in categories" translate="">category.{{category}}</option>
</select>

and in this one I use category.{{category}} inside the options of an ng-repeat option tag.

$scope.categories = ['Art', 'Automotive'];

<select class="form-control" ng-model="category" >
    <option value="{{category}}" ng-repeat="category in categories" translate="">category.{{category}}</option>
</select>

The result is that the textKey itself is shown but not the translation. If I change the language the [MISSING] appears.

According to the angular-gettext the last one of there should work: https://angular-gettext.rocketeer.be/dev-guide/annotate/ <- interpolation

Is this possible? And if so, how?

Answer 1

I found the answer: translate the text beforehand inside the javascript:

angular.module("myApp").controller("helloController", function (gettextCatalog) {
    var translated = gettextCatalog.getString("Hello");
});

or simply this:

<option value="{{category}}" ng-repeat="category in categories" translate="">{{category|translate}}</option>