We Keep Coding

Angular 4 Select don't update on ngModel change

I am trying to make that after new value is selected, I call eventChange() function and restore selected value to default. But what happens: ngModel value updates, but selected value stays the same. How should I do that selected value and ngModel value would be the same?
HTML file
<select [(ngModel)]="selectedValue"
(change)="eventChange()"
>
<option [disabled]="true"
[ngValue]="-1">
Choose an option
</option>
<option *ngFor="let item of myList index as i"
[ngValue]="i"
>
{{item.name}}
</option>
</select>
Function from Component file
selectedValue = -1; //works //Option in select is changed
eventChange(){
this.selectedValue= -1; //don't work
//Function is called,
//Value changes
//But selected Option in Select doesn't change
}
Comment:
On running web page(refresh) first value of select is set properly, if in component file I set variable selectedValue to other index the other value is selected, but it works only on run, but not in function)
Also I found this question Angularjs: select not updating when ng-model is updated
But here is an answer to AngularJS for using ng-options, instead of ng-repeat, in angular 4 I found only *ngFor...
Update:
Clarification just in case: function is being called, but I want change selected option through javascript. I try this by changing ngModel value, but even when ngModel value is cahnged, selected option doesn't change.

Use ngModelChange and you don't need [ngValue]
<select [(ngModel)]="selectedValue"
(ngModelChange)="eventChange()"

Set Knockout dropdown value dynamically

I have a dropdown value which is proving very difficult to set in the console. I have tried using Jquery .val and using document.getEWlementById.value and both will not set the item. Does anyone know how I can set the value of the dropdown using the value? I think the problem is that it is using Knockout which makes it more difficult to set it dynamically.
Here is the HTML:
<select id="sourceShippingLocations" data-bind="options: $root.ShippingLocations, optionsText:'Name', optionsCaption:'Select location', value: $root.SelectedOriginShippingLocation" class="form-control" title="">
<option value="">Select location</option>
<option value="">doo Warehouse</option>
<option value="">moo</option>
<option value="">Manchester</option>
</select>

Knockout doesn't make it "more difficult to set dynamically". It just works differently.
In knockout, a viewmodel dictates what happens in the view. In other words: you don't set the value of the select through modifying the attribute directly, but you change the selected value of the underlying model and knockout manages the UI state for you.
Each of the <option> elements represents a value in an array named $root.ShippingLocations. The selected value is stored in $root.SelectedOriginShippingLocation.
In the viewmodel, you'd update the current selection by doing something like:
this.SelectedOriginShippingLocation(this.ShippingLocations()[0])
(this sets the selection to the first shipping location)
If you want to see this in action without having to modify the viewmodel, you can hack this in your console:
var root = ko.contextFor(document.getElementById("sourceShippingLocations")).$root;
root.SelectedOriginShippingLocation(ko.unwrap(root.ShippingLocations)[0]);
// change 0 for the index you like

select in angularjs not selecting default value

Following is my code extract
<select
ng-init="joinedStatus=0"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-selected="joinedStatus==joinstat.id"
ng-model="joinedStatus">
<option>{{joinedStatus}}</option>
</select>
But still there is no default option selected.
joined is defined as:
$scope.joined=[{id:0,name:'No'},{id:8,name:'Yes'}];

You should not provide <option> inside select since ng-options will add the options from specified array.
ng-selected is of no use. Remove it too.
So, this will work
<select ng-init="joinedStatus=joined[0]"
ng-options="joinstat.name for joinstat in joined track by joinstat.id"
ng-model="joinedStatus">
</select>
Since we have initialized the model with 0th array element. You will see this selected in the select.

ng-model with predefined select options

Ok, I'm sure this one is super simple, though it's evading me.
I have a very simple dropdown select menu - as shown below - with predefined options.
I am setting the $scope.qty in my controller and it correctly selects the appropriate <option>
However, in my controller, on a save() function, when I get the value of $scope.qty i get the original value, that i set earlier, and not the newly selected on.
What I am missing to bind my selected option to the model?
<select ng-model="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
In my controller, I set the qty
$scope.qty = 4;
When I change my select, to say 2, $scope.qty still equals 4.

You can simply create the array in ng-options:
<select ng-options="nr for nr in [1,2,3,4]" ng-model="qty"></select>
Although the way you did it should usually work too. ng-options is not required for ng-model to work. It's the other way around.

AngularJS 1.3 only allows for a single option element that can be used for the null value (aka, not selected).
You need to use the ngOptions convention.
Here's the documentation that explains this:
https://docs.angularjs.org/api/ng/directive/select

knockout using one option list for selectedOptions on multiple selectboxes

http://jsfiddle.net/E2AMX/ has the exact demonstration of the problem, which is:
I have multiple select boxes on the same page. All the options of the selectboxes are in the given form:
<option value="#id_num">StringVal</option>
and i have one observableArray (say idlist) of id_nums with no separation regarding selectboxes. For example,
idlist = ko.observableArray([1,2,3,4]);
and the selectboxes are as
<select name="first" data-bind="selectedOptions: idlist">
...
<option value="2">Blah</option>
<option value="3">Blah</option>
...
</select>
<select name="second" data-bind="selectedOptions: idlist">
...
<option value="1">Blah</option>
...
</select>
<select name="third" data-bind="selectedOptions: idlist">
...
<option value="4">Blah</option>
...
</select>
My problem is: when i select one option from a selectbox, other selectboxes return to their initial states. This is directly related to selectedOptions, for if i remove the selectedOptions directive, this problem does not occur.
Any suggestions will be very welcomed.
Thanks.

The selectedOptions binding is meant to be used on a single <select> tag with multi-select enabled. It will keep an array of each item in the options box selected.
The reason you are seeing the behavior you are is because when you you select a single value from one of the drop downs, the selectedOptions binding immediately fires. The logic goes something like this:
Update on target <select> fires.
Binding extracts the value from <option> and updates the underlying observable array.
Observable array fires update since values have changed.
Secondary drop downs respond to update, and update their selected value based on what is in the array.
Since no value exists in the set of <option> tags, the value is cleared.
This is why you are seeing this behavior. If you want to collect a composite from all selected options, then you will either need to write a new custom binding, or create a seperate array for each <select> you want to bind to.