Dropdown list is not holding the value on saving the data

Question

WDrodownList

When I am selecting a value from dropdown list say "Practice List" and clicking on save button, and again modifying that item I can see that the dropdown list is not holding its selected value i.e., "Practice List". Instead it is holding its default value i.e., "My List". How can I make it hold the selected value after saving the data?

Here's my html code:

 <select id="{{::prefix}}_Select_Practice" name="FreeTextDrugSchedule" ng-options="option as option.name for option in data.practiceOptions" class="form-control medium" ng-model="data.saveIn" style="margin-bottom: 5px;">
                <option value="" selected="selected">My list</option>
            </select>
<button id="{{::prefix}}_Button_Submit" class="btn btn-primary" ng-click="validations = null; doSubmit()">{{submitVerb}}</button>

Here's my js file code:

 $scope.doSubmit = function (dataToSubmit) {
                        $scope.submitted = true;
                        if (dataToSubmit) {

                            if ($scope.data.saveIn) {
                                dataToSubmit.dataToSubmit.saveIn = $scope.data.saveIn;
                            }
                            $scope.data = dataToSubmit.dataToSubmit ? dataToSubmit.dataToSubmit : dataToSubmit;
                        }

                        validateSubmission();

                        // TODO simplify this validation
                        if ($scope.EnterDetailsForm.$invalid || $scope.showEffectiveDateError ||
                            $scope.showEffectiveDateRangeError || ($scope.sigValidations &&
                            $scope.sigValidations.length)
                            || ($scope.data.pharmacy1 && $scope.data.pharmacy1 == $scope.data.pharmacy2)
                            || ($scope.showMDD && (!$scope.data.medication.maximumDailyDose || ($scope.showMDD == 'pd' && !$scope.data.medication.maximumDailyDoseUnit)))
                            || $scope.showProviderError
                            || $scope.showSupervisorError
                            || $scope.drugMinError
                            || $scope.showPrimaryError) {

                            $scope.validations.push({
                                name: 'Invalid Entry',
                                msg: 'Please correct all errors on this form to continue.'
                            });

                            if ($scope.entity == 'Prescription') {
                                $scope.scrollToError = true;
                            }
                        } else if ($scope.entity == 'Prescription' && !validateDuration()) {
                            $scope.$emit('ghostMessage', 'The length of the prescription should not be more than 365 days');
                        } else { //proceed with submission
                            // prepare the data to be submitted to the alert checker
                            var dataToSubmit = prepareDataToSubmit();

                            // validate payload before submit
                            if (dataToSubmit.medication.lastRefillDate && dataToSubmit.medication.startDate && dataToSubmit.medication.lastRefillDate.date < dataToSubmit.medication.startDate.date) {
                                $scope.$emit('ghostMessage', 'Last written date cannot be before start date.');
                            } else if (dataToSubmit.medication.lastRefillDate && dataToSubmit.medication.stopDate && dataToSubmit.medication.lastRefillDate.date > dataToSubmit.medication.stopDate.date) {
                                $scope.$emit('ghostMessage', 'Last written date cannot be after stop date.');
                            } else if (dataToSubmit.medication.diagnoses && dataToSubmit.medication.diagnoses.length == 2 && dataToSubmit.medication.diagnoses[0].code &&
                                dataToSubmit.medication.diagnoses[0].code == dataToSubmit.medication.diagnoses[1].code) {
                                $scope.$emit('ghostMessage', 'You may not specify the same diagnosis code for both primary and secondary diagnoses');
                            } else if ($scope.entity != 'FavoriteRx' && $scope.showDAWGenericWarning && !$scope.formularyCheckedForDAWWarning) {
                                checkFormularyAlertsForDAWWarning(dataToSubmit);
                            } else {
                                $scope.formularyCheckedForDAWWarning = false;

                                // check dose alerts if necessary
                                dataToSubmit.schedules = angular.copy(schedules);
                                if ($scope.entity == 'Prescription' && doseCheckNeeded) {
                                    checkDoseAlerts(dataToSubmit);
                                } else { // done; process submission
                                    $scope.submit({data: dataToSubmit, optionCodes: $scope.optionCodes});
                                    $scope.loading = 0;
                                }
                            }
                        }
                    };

Answer 1

I'm not exactly sure what you are asking for, or what you mean by "saving" the data, but I will try to offer some assistance.

I don't know angular.js, but my suggestion would be to wrap the select in a form (which I assume you're doing) and then set the value using the post value in angluar.js (if you can do that). That way, if you reload the page, it will not load the default value. Additionally, if you're merely inspecting the element in a browser after you select a new option, it won't show you that a new option is selected (i.e. the selected="" attribute will still be on the default).