Select List (ng-select) – AngularJS

Hey everyone,

Just a quick post on how to do up a select list in AngularJS. This one took a bit of time to work out, particularly the display/value pairing.


<div ng-controller="MyCtrl">
        Status: <br />
        <select name="Status" ng-model="lesson.Status" required ng-options="status.value as status.display for status in status_options"></select>   


  1. var myApp = angular.module('myApp', []);
  3. function MyCtrl($scope) {
  4.     $scope.status_options = [
  5.             { display: 'Enabled', value: 'enabled' },
  6.             { display: 'Disabled', value: 'disabled' },
  7.             { display: 'Deleted', value: 'deleted' }
  8.         ];
  10.     $scope.lesson = {
  11.         BusinessId: 0,
  12.         Description: null,
  13.         Duration: 0,
  14.         Price: 0,
  15.         ProductId: 0,
  16.         Quantity: 0,
  17.         Start: "/Date(-62135596800000)/",
  18.         Status: 'enabled', //Change to null in order to remove default
  19.         Title: null,
  20.         Type: null
  21.     };
  22. }

If you’re just following along, I’ve added a quick JSFiddle:

You’ll notice that in the markup, the value is actually an index. This is pretty misleading, but Angular will actually assign the appropriate value to the model (“enabled”, “disabled”, etc).

Another thing that you can do fairly easily, is to remove the default value. Simply make the status null. You can test both these by outputting the JSON or using

Check out the following StackOverflow post for more info:
Or the documentation:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.