change other ng-model value from select. ng-change the right way? AngularJS

Issue

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}">
  <option value="previewWidth = 1920; previewHeight = 1080">1</option>
  <option value="previewWidth = 2000; previewHeight = 1060">2</option>
  <option value="previewWidth = 2080; previewHeight = 2000">3</option>
</select>

The way I do it right now (see example) updates after I click another target and ignores the first click. I assume that update goes wrong here. Is there a better way to update this?

To be clear: I want to change 2 data-ng-model values with .

EDIT:

<div id="breedte-edit" class="col-6">Breedte
 <input id="input-breedte" type="number" data-ng-value="1920" data-ng-min="600" data-ng-max="8000" data-ng-init="previewWidth='1920'" data-ng-model="previewWidth" class="form-control" required="required" aria-label="Sizing example input" maxlength="5">
</div>
<div id="lengte-edit" class="col-6">Lengte
 <input id="input-lengte" type="number" data-ng-value="1080" data-ng-min="600" data-ng-max="5000" data-ng-init="previewHeight='1080'" data-ng-model="previewHeight" class="form-control" required="required" aria-label="Sizing example input" maxlength="5">
</div>
<div id="reset-edit" class="col-4" style="margin-top: auto">
 <button type="button" class="btn btn-outline-dark" data-ng-click="GetNewData(); previewWidth = 1920; previewHeight = 1080" value="FETCH">Reset</button>
</div>
                  

Here above is the inputs that need their value changed

Solution

So there are many ways to accomplish changing the previewHeight and previewWidth variables using a select. I am going to solve this using an array of objects.

// in controller

// initialize options
$scope.sizeOptions = [ 
    { width: 1920, height: 1080 },
    { width: 2000, height: 1060 },
    { width: 2080, height: 2000 }
];

// initialize preview width/height
// it's is better to avoid using ng-init and to initialize variables in your controller

// set initial select value
$scope.selectedItem = $scope.sizeOptions[0];

// or you could assign them to the variables you chose in your example

//  $scope.previewWidth = $scope.sizeOptions[0].width;
//  $scope.previewHeight = $scope.sizeOptions[0].height;

$scope.GetNewData = function(item){
    // do work with item here
    // item.width and item.height are available here
    // if you are using these width and heights in the view, you might not even need this function.
    // you could use selectedItem.width or selectedItem.height in your view
};


// in view (select)

<select data-ng-model="selectedItem" data-ng-change="GetNewData(selectedItem)">
    <option ng-repeat='option in sizeOptions' ng-value="option">{{$index}}</option>
</select>

Since this is for school, I imagine you are somewhat new to coding and/or angularjs. Be careful when assigning/setting variables. In your code sometimes you set previewHeight and previewWidth variables as a number type and other times you set the number inside a string. (Perhaps I saw this in your cross post). Numbers and strings don't evaluate the same way so just be sure which one you want to use for your use case.

Answered By - tbone849