update data-model with option id instead of option value in select dropdown

Question

I am new to angular js. I have a json value based on which i will be populating my html. I need to populate a select dropdown with two options and make one auto selected based on the flag mentioned in the json.

Below is my json

$scope.alertdata=[{"Action": "1", "Name":"Peter"},{"Action": "2", "Name":"Steve"},{"Action": "3", "Name":"Khan"}]

My HTML

<tr ng-repeat="data in alertdata">
    <td>
<select ng-model="data.Action">
                            <option ng-selected="data.Action == '1' " id="data.Action">Option1</option>
                            <option ng-selected="data.Action == '2' " id="data.Action">Option2</option>
                            <option ng-selected="data.Action == '3' " id="data.Action">Option3</option>
                            <option ng-selected="data.Action == '4' " id="data.Action">Option4</option>
                        </select>
</td>
</tr>

In the above HTML whenever i change my option in the dropdown my model is changed with the value of the option selected. Instead I want the id of the option to be updated in my model, since i require to process the updated model based on the new selection of option.

Thanks In Advance

Answer 1

You can use angular's ng-options, which automatically selects the correct one when the ng-model is pre-filled:

$scope.availableOptions = [
    { id: "1", name: "Option1" },
    { id: "2", name: "Option2" },
    { id: "3", name: "Option3" },
    { id: "4", name: "Option4" }
];

Then in your html:

<tr ng-repeat="data in alertdata">
    <td>
        <select ng-model="data.Action"
                ng-options="option.id as option.name for option in availableOptions">
        </select>
    </td>
</tr>

See this working jsfiddle