How to use ng repeat correctly in angular?

Question

I have an old code for a form in angular which contains these lines :

      <label for="language">{{'LANGUAGE_LABEL' | translate}}</label>
      <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue">
      <option value="en">{{'referencedata.languages.EN' | translate}}</option>
      <option value="nl">{{'referencedata.languages.NL' | translate}}</option>
      </select>

And I want to optimize it by using ng repeat (I had read that ng option is better but I never used before...)

So, in my controller, I added a new variable :

$scope.languages = [{
      name: "referencedata.languages.EN",
      value: "en"
    }, {
      name: "referencedata.languages.NL",
      value: "nl"
    }]

And this my code with using ng repeat :

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue">
<option ng-repeat="language in languages track by value" value="{{language.value}}">
{{language.name | translate}}
</option>

But it didn't work at all and I got "Error: [ngRepeat:dupes]".

Can you tell me please how can I use ng repeat here ? or ng option if you can and if its is more optimized that ng repeat. thank you!!

Answer 1

You track by value but it's not defined. It should be language.value.

<option ng-repeat="language in languages track by language.value" value="{{language.value}}">

Below you can find the ng-options version:

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"
        ng-options="language.name for language in languages track by language.value">
</select>

And a working snippet with both examples:

function Main($scope) {
  $scope.languages = [{
      name: "referencedata.languages.EN",
      value: "en"
    }, {
      name: "referencedata.languages.NL",
      value: "nl"
    }];
}

angular.module('test', []);
angular.module('test')
  .controller('Main', Main);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="test">
  <div ng-controller="Main">
    <label for="language">{{'LANGUAGE_LABEL'}}</label>
    <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue">
      <option ng-repeat="language in languages track by language.value" value="{{language.value}}">
        {{language.name}}
      </option>
    </select>
    <hr>
    <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"
            ng-options="language.name for language in languages track by language.value">
    </select>
  </div>
</div>