AngularJS - get the value of the selected <option> for the model

Question

I got a problem with ng-model and ng-selected. At the beginning the ng-model is null, and the correct value is selected. So if you submit the form:

{ resolution : undefined, desiredFps : 30 }

And it's incorrect.

So, I want that the model of the <select> take the selected value based on the ng-selected attributes. What is the correct way of updating the selected value and updating the model with the value as well?

<form novalidate name="preferencesForm" 
                 ng-submit="submitPreferencesForm(BEPreferencesForm)"
                 ng-controller="UserPreferencesFormController">
   <label for="resolution">Choose the resolution : </label>
   <br/>
   <select name="resolution" id="resolution"
           ng-model="BEPreferencesForm.resolutionId"
           ng-change="buttonDisabled = False">
      <option value="1" ng-selected="user.screenWidth ==  800 && user.screenHeight == 600">800x600</option>
      <option value="2" ng-selected="user.screenWidth == 1024 && user.screenHeight == 768">1024x768</option>
      <option value="3" ng-selected="user.screenWidth == 1280 && user.screenHeight == 720">1280x720</option>
      <option value="4" ng-selected="user.screenWidth == 1280 && user.screenHeight == 768">1280x768</option>
      <option value="5" ng-selected="user.screenWidth == 1360 && user.screenHeight == 768">1360x768</option>
      <option value="6" ng-selected="user.screenWidth == 1600 && user.screenHeight == 900">1600x900</option>
      <option value="7" ng-selected="user.screenWidth == 1768 && user.screenHeight == 992">1768x992</option>
      <option value="8" ng-selected="user.screenWidth == 1920 && user.screenHeight == 1080">1920x1080</option>
   </select>
</form>

Answer 1

There is an Angular way, you should use ng-options directive. Simplified example:

<select ng-model="BEPreferencesForm.resolutionId"
        ng-options="item.id as item.name for item in items">
</select>

In the controller:

$scope.items = [
    { id: 1, name: '1024x768' },
    { id: 2, name: '1280x768' }
];

// Resolution with id = 2 will be selected by default:
$scope.BEPreferencesForm = {
    resolutionId: 2
};