angular form not taking select option values

Question

I have a form that gets submitted on a ng-submit. Inside the form is a table which has a select box. I am unable to pass the value selected in the select box to the function inside the controller. Here is the code

<form name="formExeOptions" role="form" novalidate class="ng-scope ng-invalid ng-invalid- 
    required ng-dirty ng-valid-minlength" ng-submit="createExecutionStepOption(caseExecution.id,formExeOptions.optionSel.value)">
    <h4>Add an execution step option</h4>

    <div class="table-responsive">
        <table>
            <thead>
                <tr>
                    <th>Step</th>
                    <th>Name</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <select name="optionSel">
                            <option name="TOPPER" value="1" selected>TOPPER</option>
                            <option name="RSC" value="2">RSC</option>
                            <option name="SPD" value="3">SPD</option>
                            <option name="SFT" value="4">SFT</option>
                            <option name="LMP" value="5">LMP</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="nameOption" ng-model="exeoption.name">
                    </td>
                    <td>
                        <input type="text" class="form-control" name="valueOption" ng-model="exeoption.value">
                    </td>
                    <td>
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

Can someone please provide the right syntax?

Answer 1

I made a comment about binding optionSel to a scope value and checking it in your submit function. Here's a demo.

The relevant parts are first, I changed your select markup to this:

<select name="optionSel" ng-model="selectedOption" ng-options="option.value as option.name for option in options"></select>

We bind the value to selectedOption and use ng-options (documentation) to instruct it where to find the options, and which field is the name and which is the value. The format in this case is [item name].[value property] as [item name].[name property] for [item name] in [array of items on scope]. Then we declare that array of items in the controller and give selectedOption a default value.

Second, I remove the formExeOptions.optionSel.value argument from your submit function call.

Here's the relevant parts in the controller:

// define your array of possible options
$scope.options = [
    {name: 'TOPPER', value:'1'},
    {name: 'RSC', value:'2'},
    {name: 'SPD', value:'3'},
    {name: 'SFT', value:'4'},
    {name: 'LMP', value:'5'},
  ];

$scope.selectedOption = '1'; // default value

// omitted for brevity

// your submit function
$scope.createExecutionStepOption = function(caseExecutionId) {
  // do whatever. you can access the selected option using $scope.selectedOption
};