Unable to assign the selected value from database to dropdown using angularjs

Question

Hello all I want to show selected value in dropdown based on the value fetch from the database in angularjs. I am trying the basic functionality where I am setting ng-model value to the dropdown after fetch it from database. But it is not working for me. Its always show me blank dropdown.

My dropdown structure

 <select name="singleSelect" ng-model="measurements.Backzip" class="form-control">
                                <option value="">--Select --</option>
                                <option ng-repeat="sel in selectables" value="{{sel.value}}">{{sel.label}}</option>
                            </select>

My code for fetch the data from database and assign value to measurements.Backzip

Firstly I have declared the variables

 $scope.measurements = {};
$scope.measurements.Backzip = "";

Then After this I create this function

 function GetDetails() {

        $scope.selectables = [
       { label: 'Yes', value: 'true'},
       { label: 'NO', value: 'false' } 
        ];

        $scope.getemail = store.get('usersession');

        var productResult = customerService.getMeasurementDetails($scope.getemail);
        productResult.then(function (result) {
            if (!result.data) {
                console.log("empty");
            }
            else { 
                store.set("mvalues", result.data);
                $scope.measurements = result.data;
                $scope.measurements.Backzip = result.data.Backzip;
                console.log("zip",result.data.Backzip);

            }
        });
    };

Json output from my api

{"id":2,"userid":null,"Height":3,"Kameezlength":3,"Shoulder":3,"SleeveLength":3,"SleeveMoori":3,"Armhole"
:3,"Chest":3,"Waist":3,"Hip":3,"KameezGhera":3,"Chalk":3,"FrontNeck":3,"BackNeck":1,"BackDori":3,"Backzip"
:false,"Plates":3,"SalwarLength":3,"SalwarHalfPatiala":null,"SalwarFullPatiala":null,"SalwarPouncha"
:3,"SalwarAssan":3,"SalwarBelt":3,"PazamiLength":32,"PazamiChurridaar":null,"PazamiThigh":3,"PazamiKnee"
:3,"PazamiMoori":3,"PazamiAssan":3,"PazamiBelt":3,"useremail":"[email protected]"}

Data is fetching succesfully here.But I am unable to assign the selected value to dropdown. Can anybody help. I tried almost every example from stackoveflow. But nothing works. Maybe I am missing anything

Answer 1

This is the classic issue of trying to assign a value to a select that is not a string. Fortunately, Angular has the perfect construct to address this in ng-options.

Change your HTML to this:

<select 
    name="singleSelect"
    ng-model="measurements.Backzip"
    class="form-control"
    ng-options="option.value as option.label for option in selectables">
</select>

And then change the code in your controller to this:

$scope.selectables = [
    { label: '--Select--'},
    { label: 'Yes', value: true},
    { label: 'NO', value: false }];

** Update: Added the default '--Select--' option from the original.