I'm facing an issue related to AngularJS. The problem I'm encountering is that...
In my code, there are two select elements. Whenever I choose an option from the first select, an Ajax call is made using ng-change to populate the second select based on the response. However, after the Ajax request finishes and $scope.$apply() updates everything, the second select always defaults to selecting the last item. Why does this happen and how can I prevent it?
Interestingly, this strange behavior only occurs with one specific select element, even though I have many other select elements populated via Ajax.
Simplified HTML Code
<select class="form-control" ng-model="id_professional"
ng-options="professional.ID as professional.NAME for professional in listProfessionals">
<option value="">Select...</option>
</select>
$scope.listProfessionals Data
[
{ID: "700003655490405", NAME: "Jhon"},
{ID: "700003655490406", NAME: "Lucas"},
{ID: "700003655490407", NAME: "James"},
{ID: "700003655490408", NAME: "Michael"}
]
After populating the list, the default selected item is always "Michael."
I have already attempted a potential solution linked here, but unfortunately, it did not work: Why dropdown selecting last value