title: How to ng-translate inside select box option in angularjs
body: <p>How do I apply ng-translate to translate options inside a select box. <br>
  For example:</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;select class="form-control" ng-model="me.gender" ng-options="gender.name for gender in genders"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.genders = [{code: "M", name:"TXT_MALE"}, {code: "F", name:"TXT_FEMALE"}]
  </code></pre>
  
  <p>enUS.json:</p>
  
  <pre><code>{
      "TXT_MALE": "Male",
      "TXT_FEMALE": "Female",
  }
  </code></pre>
  
  <p>I tried adding filter like <code>ng-options="gender.name for gender in genders | translate"</code>
  but obviously it was adding filter to <code>$scope.genders</code> array instead of single element</p>
  
  <p>I tried writing own filter (I am new to this)</p>
  
  <pre><code>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;
    }
  }])
  </code></pre>
  
  <p>But I got following error</p>
  
  <pre><code>Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
  </code></pre>
  
  <p><strong>It seems like a simple task but it has already taken half of my day, what am I doing wrong :(</strong></p>