Initializing/populating select boxes on page load in AngularJS

Question

I'm writing a web application using AngularJS. I use a third-party library (that provides an Angular service) to fetch values from a database, and then use those to initialize some dropdown/select boxes on a page.

So, I have simple select boxes like this:


 ng-controller="ChoiceCtrl">

And a corresponding controller that initializes the choices for the select boxes. The service I'm using calls the given callback function after it receives values from the database. (The callback functions could be refactored into one but I'm using separate ones for clarity.)

angular.module('choice').controller('ChoiceCtrl', function($scope, ThirdPartyService) {
    $scope.selectedFoo = '';
    $scope.selectedBar = '';
    $scope.foos = '';
    $scope.bars = '';

    var fooCallback = function(result) {
        $scope.foos = result;
        $scope.$apply;
    }

    var barCallback = function(result) {
        $scope.bars = result;
        $scope.$apply;
    }

    ThirdPartyService.asyncGetData('fetchFooOptions', fooCallback);
    ThirdPartyService.asyncGetData('fetchBarOptions', barCallback);
});

The database calls are asynchronous and finish after the page has been rendered for the first time, so I manually call $scope.$apply in each callback function.

Is this the right way to initialize dropdown/select boxes in an AngularJS app when the values are fetched asynchronously when loading a page?

I've read tutorials saying that calling $scope.$apply manually is always a "code smell"... But since I'm fetching the values from a database, the operation happens "outside of Angular" which I believe makes those calls justified - and actually necessary.

I'm also wondering if the controller is the right place for these calls. In the tutorials I've read the options are always set in the controller but those sandbox examples never have an asynchronous database call happening.

Ajay Beniwal · Answer 1 · 2013-04-08 12:48:59Z

You should modify three things in your code

1)The service should return a promise :Refer to documentation of angular for creating promise
  Inside service resolve the promise when data is recieved from the server
2)Inside controller just assign proper values to bar and foos when promise is resolved
3)Remove $scope.apply since now you are modifying the values inside proper angular scope

Link:Use Promise and service together in Angular

Thank you, I'll look more into promises. (I'll upvote your answer once I have the reputation to do so...) — MJV, Apr 9 '13 at 10:16

Kumar's Blog

Sunday, March 2, 2014

Initializing/populating select boxes on page load in AngularJS

1 Answer

2 comments: