javascript - Maintaining an array of ints representing option indices in Angularjs -

i have array of ints in model meant represent indices of list of options user pick using select list. idea there's list can expand , keep picking things select list. have code along these lines:

    <ul>       <li ng-repeat="item in model.arrayofints">         <select ng-model="item"                 ng-options="choice.id choice.name choice in common.options">           <option value="">---</option>         </select>         <button ng-click="model.arrayofints.splice($index, 1)" type="button">           delete         </button>       </li>     </ul>      <button ng-click="model.arrayofints.push(null)" type="button">       add     </button> 

i have 2 problems seem related:

• the ng-model not seem bind properly; if inspect scope can see newly-pushed members of arrayofint still set null after select select menu representing them.

• when attempt push item array, angular complains duplicate options not allowed.

what proper way i'm trying do?

jsfiddle sample

the first issue ("ng-model not bind properly") because you're not targeting array ng-model. item in ng-repeat new property on scope (created ng-repeat). doesn't contain information on came (arrayofints).

the following code tells ng-model point right index of array, rather new scope property.

<select ng-model="model.arrayofints[$index]"             ng-options="choice.id choice.name choice in common.options"> 

the second issue because model.arrayofints can have multiple duplicates in (click "add" twice , you've added 2 nulls). angular needs way tell difference between them, need add tracking property, in case $index.

<li ng-repeat="item in model.arrayofints track $index">