CODEWITHSUNDEEP
angularjsangularjs-ng-options
JPil
JPil

Reputation: 301

AngularJS ng-options not populating from Promise values

I have a select box which bind the data from the database. 

<div class="select__wrapper-inner" data-ng-init="loadCountries()">
   <select id="country" ng-model="selectedCountry"
           ng-options="country.CountryName for country in countries">
      <option value="" selected>Select your option</option>
   </select>
</div>

Below is the loadCountries function

$scope.loadCountries = function () {       
    var resultList = mainService.loadCountries();
    resultList.then(function (response) {          
        $scope.countries = response.data;  
        $scope.selectedCountry = $scope.countries[0];
    });       
}

Also here is the loadcountires code in service

function mainService($http) {
    this.loadCountries = function () {
        var result = $http({
            method: 'GET',
            url: '/API/Country/Countries'               
        });
        return result;
    }
}

When I checked countries list, it is populating succesfully, but not binding to ng-options in the select box. Can anyone help me with this please !!

Upvotes: 0

Views: 135

Answers (1)

Ashish Bakwad
Ashish Bakwad

Reputation: 811

Change ng-options like this and try.

<div class="select__wrapper-inner" data-ng-init="loadCountries()">
   <select id="country" ng-model="selectedCountry"
           ng-options="country as country.CountryName for country in countries">
      <option value="" selected>Select your option</option>
   </select>
</div>

Upvotes: 0

Related Questions