how to fill combo box on page load in angular js?

Question

I have a page which has two combobox in it. This is my view :

<div ng-init="loadComboBox()">
 <select class="form-control" ng-model="SelectedItem1" ng-options="employee.FirstName for employeein Employees">
<select class="form-control" ng-model="SelectedItem2" ng-options="employeePlan.PlanName for employeePlan in Plans">
</select>
</div>

this is my controller : This controller calls the service which in turns does an API call.

angular.module('myApp').controller('EmployeeCtrl',
    function($scope, $http, EmpSvc, ngProgress, PlanSvc) {

        $scope.Employees= null;
        $scope.Plans= null;
        $scope.SelectedItem1 = '';
        $scope.SelectedItem2 = '';
        $scope.loadComboBox= function() {
            ngProgress.start();
            EmpSvc.getEmployees().then(function(data) {
                $scope.Employees= data;    
                $scope.SelectedItem1 = $scope.Employees[0].FirstName;
            });

            PlanSvc.getPlans().then(function(plans) {
                $scope.Plans = plans;    
                $scope.SelectedItem2 = $scope.Plans[0].PlanName;
            });

            ngProgress.complete();
        }

});

The controller calls the services properly and I get the data in the scope values as well. The values are assigned to Scope.SelectedItem1 and Scope.SelectedItem2, but on the UI side it doesn't show up. I also tried to do $scope.$$apply(), which didn't work either.

The combobox, does shows all the values in the dropdown, but I want the combobox to be filled with atleast one default value in it. Can someone help me with that ?

Basically I want to load the combobox before the page loads, from an API

score 0 · Answer 1 · answered Oct 20 '14 at 11:06

I think, You have not use directly $scope.Employees and $scope.Plans on $scope object. You have to create empty object on $scope.

For Example,

$scope.vm = {};
$scope.vm.employees = {};
$scope.vm.plans = {};

I have created example for your problem in plnkr. Visit http://plnkr.co/edit/rKyjijGWSL1IKy51b8Tv?p=preview

how to fill combo box on page load in angular js?

1 Answers1