Get value from a database and set it as selected value of a dropdownlist using Angularjs - angularjs

Question

I get some values from a database. With one of the values I get, I would like to have that as a selected value in the dropdownlist when another dropdownlist changes. Please see code below:
index
<div class="form-group">
<select ng-model="editProject.ClientId" name="client_id" ng-options="item as item.Company for item in clientList" class="form-control">
</select>
<div>-->{{editProject.ClientId}}</div> <=== This is to see if I am getting the value from js
<span style="color: red;" ng-show="formEditProject.client_id.$touched && formEditProject.client_id.$invalid">Select a client</span>
</div>
js
//=== This is the client list in the dropdown list ===>
$scope.editClient = {
"ClientId": null,
"Company": null,
"ContactPerson": null,
"EmailAddress": null
}
//== Retrieves clients from the database on page load ===>
$scope.getClients = function () {
return $http.get('/Clients/GetClients')
.then(function (response) {
$scope.clientList = response.data;
});
};
//== Event when a different dropdownlist is changed ===>
$scope.onProjectEditChange = function () {
console.log($scope.selectedProjectId.Id);
$http({
url: '/Project/GetProjectByProjectId',
params: {
"id": $scope.selectedProjectId.Id
},
method: 'post'
})
.then(function (response) {
$scope.editProject.Id = response.data.Id;
$scope.editProject.Description = response.data.Description;
$scope.editProject.ClientId = response.data.ClientId;
$scope.editProject.ProjectLead = response.data.ProjectLead;
$scope.editProject.IsApproved = response.data.IsApproved;
});
}
I am able to see the clientId change in the <div>-->{{editProject.ClientId}}</div> but it doesn't change the selected value of the dropdownlist.

Answer 1

Use ng-change option and check it
<div class="form-group">
<select ng-model="editProject.ClientId" name="client_id" ng-options="item as item.Company for item in clientList" class="form-control" ng-change='changeSelectedItem(editProject.ClientId")'>
</select>
<div>-->{{editProject.ClientId}}</div> <=== This is to see if I am getting the value from js
<span style="color: red;" ng-show="formEditProject.client_id.$touched && formEditProject.client_id.$invalid">Select a client</span>
</div>
$scope.changeSelectedItem = function(client){
$scope.editProject.ClientId= client.ClientId;
}