Display a Server-Supplied Drop Down List Using AngularJS

These are my notes on displaying a list of server-supplied objects in a drop down list using AngularJS.


I have a server that supplies lists of lookup objects that are used in an AngularJS-based single-page application (SPA). The SPA obtains a list through an API call to the server. The server returns an ordered list of JSON objects. Every object in every list includes a key value, a display value, and supplementary data. For the purposes of this article, only the key and display values are of any concern.

For example, the SPA needs a list of units of measure. The server supplies a list of objects along these lines. They key value is called code and the display value is called display:

        code: "L",
        display: "L",
        description: "litres"
        code: "ML",
        display: "mL",
        description: "millilitres"
    ... etc ...

In the SPA code, each lookup table is wrapped in its own Angular service.

From List of Objects to Dropdown Using <select>

Angular can be told to create a dropdown list using an array of objects thus:

<select ng-model="product.uom"
        ng-options="u.display for u in units" />

Here ng-options tells Angular to build the dropdown list showing the display attribute of each object. Whenever the user chooses an item, the entire associated object is stored in $scope.product.uom (uom means units of measure). For my purposes this is very handy since I want access to the entire object.

Defaulting to a Value

This works beautifully until an edit page is shown. When displaying data from the server, the dropdown shows a blank selection even though $scope.product.uom contains an object with all the correct values!

The problem is that Angular matches based on object references, not object contents. This can be illustrated thus:

var a = {foo: "bar"};
var b = {foo: "bar"};
var c = a;

Variables a and b contain two separate objects that by chance have attributes with the same values. Variables a and c contain the same object pointer.

In the example above, Angular will recognize the value in $scope.product.uom only if it points to an object in the master list $scope.units. The fact that the server-supplied object has identical attributes is irrelevant — Angular only cares whether the object pointers are identical.


There are a couple of ways around this. If there is a unique key on the object, one can use the AngularJS track by clause to tell AngularJS to compare the keys. Continuing the above examples, each object has a code attribute that has a unique string which JavaScript can compare.

<select ng-model="product.uom"
        ng-options="u.display for u in units track by u.code" />

[Original Article]

Otherwise,  when an object is loaded from the server for editing, the lookup values are replaced with pointers to the corresponding objects in the dropdown list. An unsophisticated but functional bit of code to perform this substitution might be:

// Wrapper function to retrieve a product
// from the server, keyed on productId.
apiProduct.lookup(productId, function(product) {
    $scope.product = product;

    // Replace the server-supplied lookup value
    // with the matching value
    // in the $scope.units array.
    $scope.product.uom = lookup_by_code(product.uom.code, $scope.units);

function lookup_by_code(code, data) {
    for(var i=0; i
        if(data[i].code == code)
            return data[i];

    return null;


There is a JSFiddle that demonstrates the value/reference problem concisely.

This entry was posted in Programming and tagged , , , , , , . Bookmark the permalink.

6 Responses to Display a Server-Supplied Drop Down List Using AngularJS

  1. Beginner says:

    I am new to angularjs. I am trying to set the selected value of a dropdown ..herre the data is dynamic (its fro the api) … how do i retain the selected value in the dropdown after a post method or a page refresh

  2. The section above entitled “Defaulting to a Value” attempts to cover this.

    The selection is stored in the location ng-model=”…”.
    This location can be written to, and the selection will be updated.
    However, the value must be a reference to one of the elements in the ng-options=”…” array.

  3. I may have misunderstood your question, thinking about it.

    The selection is stored in the location indicated by ng-model=”…” which one can then store, such as sending to the server via POST. When the controller is instantiated one can re-populate the location.

    If you’re wondering how to retrieve a particular item from the server, you might look at routing parameters. For example, in an app’s route provider one could do something like:

    .when(‘/order/new’, {
    controller : ‘OrderNewEditController’,
    templateUrl: ‘/static/app/order/new.html’
    .when(‘/order/edit/:code’, {
    controller : ‘OrderNewEditController’,
    templateUrl: ‘/static/app/order/new.html’

    Then the code in the controller that handles both create and edit might contain near the end something like:

    // Initialize from route parameters

    if($routeParams.hasOwnProperty(‘code’)) {
    $scope.isEditing = true;
    console.debug(“Attempting to load: “, $routeParams.code);
    // Fetch the values from the server based on ‘code’ and populate the controller.

    This may not be the best way to do it, but hopefully it’ll help spark ideas.

  4. Even, thanks for sharing that. When there are unique keys, that’s a no brainer.

  5. vinod says:

    Thanks a lot for this. I was looking for this for quite some time now and this example helped me a lot.

Leave a Reply