Ajitesh Chhatani Ajitesh Chhatani - 2 months ago 10
AngularJS Question

How to populate a select dropdown using array received from $http response in angularjs?

I am trying to populate a select dropdown using Months and Day values that are two separate arrays within a date.json file. My code for controller is as below

var app = angular.module("profileApp",[]);

app.controller("dobController",function($scope,$http){
$scope.dob={};

$http.get('date.json')
.then(function(response){
$scope.months=[];
dob = response.data;
months=dob.Months;
}, function(response){
alert("Error in response");
});


My problem is even though the response from the http service is received properly (I can successfully log the Months array value from the response), I cannot populate my select dropdown and it remains blank. HTML as below

<div class="container-fluid" ng-controller="dobController">
<label class="col-sm-6 control-label">Date of Birth:</label>
<div class="col-sm-6">
<select ng-model="birthday" ng-options="option for option in months">{{months}}</select>
</div>
</div>


My date.json file

{
"Months" : ["January","February","March","April","May","June","July","August","September","October","November","December"],
"Days" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
}

Answer

Do this,

<select ng-model="selectedItem" ng-options="month as month for month in months">

DEMO APP

Comments