ng-model data is not binding for selected ng-option

Question

HTML

<select
    ng-model="selected1"
    ng-options="item.Name as item.Name for item in jobLineClassFSC"
    class="gridinputs">
</select>
<select
    ng-model="selectedJobLineTypeFSC"
    ng-options="item.Name as item.Name for item in jobLineTypeFSC">
</select>

<select
    ng-model="selectedJobLineSubTypeFSC"
    ng-options="item.Name as item.Name for item in jobLineSubTypeFSC">

I'm getting the result and display it properly; but the selected list is not getting bound to the ng-model and I don't know why. I implemented the same in another place in my project it's working over there. Can anyone please let me know how to do that. Any help will be really appreciated.

Answer 1

My guess would be your select tags are in different scope to your controller. So the ng-model store selected values inside the wrong scope.

To avoid this the best practice is to use the dot notation like model.selectedJobLineTypeFSC:

<select ng-model="model.selectedJobLineTypeFSC"
        ng-options="item.Name as item.Name for item in jobLineTypeFSC"></select>

And in the controller check for $scope.model.selectedJobLineTypeFSC instead.