My development setup includes an AngularJS front end paired with an ASP.net Web API backend. Currently, I have a select list implementation utilizing the code snippet below:
<select id="package" class="form-control" ng-options="package as package.Name for package in request.PackageServices.Packages" ng-model="request.Package">
<option value="">No Package</option>
</select>
The select list successfully populates with the expected packages.
Upon changing the selection, the request.Package item appropriately updates with the chosen package.
When sending the request object to the Web API restful service, it accurately includes the correct package.
After the web API responds to the client with the restful response, the request object retains the precise package information.
The issue arises when the API service call is made, and the response from the service causes the select list to lose the selected value.
Below is a snippet of the saveRequest method:
$scope.saveRequest = function (request) {
console.log(request);
// At this point, the request.Package object accurately represents the selected package
applicantLinkData.create(request)
.$promise.then(
function (resp) {
$scope.request = resp.Request;
console.log(resp.Request);
// The resp.Request.Package maintains the correct package value
},
function (resp) {
// Handle failure case
}
);
};
I am struggling to find a solution to this issue. After invoking the saveRequest method, the select list in the HTML reverts to displaying "No Package" instead of preserving the chosen package.