Explaining how the value attribute receives its value:

• If an array is used as a data source, the value will correspond to the index of the array element for each iteration;
• When an object is used as a data source, the value will be the property name for each iteration.

In your specific scenario, it should look like this:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

I encountered a similar problem where I couldn't set the values in ng-options as expected. Each option generated had values like 0, 1, ..., n.

To resolve this issue, I made the following adjustment in my ng-options:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

I utilized "track by" to assign values based on room.price.

(It's important to note that in cases where there are multiple rooms with the same price, this solution may not work effectively. Ensure each value is unique.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

This approach was inspired by a blog post titled How to set the initial selected value of a select element using Angular.JS ng-options & track by.

Be sure to check out the accompanying video tutorial. It's quite informative :)

In order to modify the values of your option elements before submitting the form to the server, instead of the traditional method,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

You can opt for this approach:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

This way, the desired value will be transmitted through the form with the correct identifier.

If you want to send a custom value named my_hero to the server through a regular form submission:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

The server will receive either iron or super as the value of my_hero.

This method is similar to the response provided by @neemzy, but it includes specifying distinct data for the value attribute.

It seems like using ng-options can be quite complex (and maybe even frustrating), but in reality, the issue lies within our architecture.

AngularJS functions as an MVC framework for interactive HTML+JavaScript applications. While its View component does provide HTML "templating," its main purpose is to link user interactions, through a controller, to changes in the model. Therefore, the most suitable level of abstraction to work with in AngularJS is having a select element assign a value in the model based on a query result.

• How a query result is displayed to the user falls under the responsibility of the View, and ng-options uses the for keyword to determine what should be inside the option element, like e.g. p.text for p in resultOptions.
• How a selected result is sent to the server is handled by the Model. This is why ng-options includes the as keyword to specify which value is assigned to the model, such as k as v for (k,v) in objects.

The appropriate solution to this issue is fundamentally architectural and involves restructuring your HTML so that the Model handles server communication when needed (instead of relying on the user submitting a form).

If utilizing an MVC HTML page is seen as overly complicated for the current situation: then simply utilize AngularJS's View component for HTML generation purposes only. In this scenario, adopt the same approach used for generating elements like <li /> within <ul />, and employ ng-repeat on an option element:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

As a workaround, one can always transfer the name attribute from the select element to a hidden input element:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Here is a way to achieve this:

<select ng-model="model">
    <option value="">Please Select</option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.name}}</option>
</select>

-- UPDATED

Following some modifications, I found that the solution from frm.adiputra works even better. Here's the updated code:

obj = { '1': 'First', '2': 'Second' };
<select ng-options="key as value for (key,value) in obj"></select>

Today, I dedicated some time to tackling a challenging issue. After reading various AngularJS resources, posts, and blogs, I gained a better understanding of the finer points. However, I found the topic to be quite confusing due to the numerous syntactical nuances within ng-options.

In the end, simplicity prevailed for me.

With a scope set up as follows:

//Data used for dropdown list
$scope.list = [
   {"FirmnessID":1,"Description":"Soft","Value":1},         
   {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
   {"FirmnessID":3,"Description":"Medium","Value":3}, 
   {"FirmnessID":4,"Description":"Firm","Value":4},     
   {"FirmnessID":5,"Description":"Very Firm","Value":5}];

//Data row to be saved
$scope.rec = {
   "id": 1,
   "FirmnessID": 2
};

The following code snippet was all it took to achieve my desired outcome:

<select ng-model="rec.FirmnessID"
        ng-options="g.FirmnessID as g.Description for g in list">
    <option></option>
</select>   

Notably, I opted not to utilize track by. Including track by would result in the selected item returning the object that matched the FirmnessID instead of the FirmnessID itself. This approach now aligns with my requirement of returning a numeric value rather than the object, utilizing ng-options for its performance benefits of avoiding creating a new scope for each generated option.

I also required an initial blank row, easily achieved by adding an <option> to the <select> element.

For a visual representation of my solution, you can visit this Plunkr link.

This code snippet is versatile and can adapt to various situations:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

By utilizing your model for data binding, you can retrieve the value stored within the object and set the default selection depending on your specific requirements.

If you prefer simplicity over using the new 'track by' feature, you can achieve the same result with an array by following this approach:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

It's important to note the contrast between the standard syntax and specifying key-value pairs which results in 0,1,2 etc. for an array:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

The expression k as v is replaced with v as v.

This realization was made through a simple understanding of the syntax. The breakdown of the array/object into key value pairs is facilitated by the (k,v) statement.

In the context of 'k as v', k represents the value while v stands for the text option visible to the user. The use of 'track by' may seem excessive and unnecessarily complicated.

In order to tackle this issue, I implemented a solution by monitoring the selection based on the value and updating the selected item property to match the model in my JavaScript code.

AvailableCountries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.AvailableCountries track by country.CountryId">

The controller assigned to vm holds the relevant data, with the corresponding country details being retrieved from the service as

{CountryId =1, Code = 'USA', CountryName='United States of America'}

Upon selecting a different country from the dropdown menu and submitting the form by clicking "Save", the correct country was successfully linked.

The ng-options attribute does not automatically assign the value attribute to the <options> tags when working with arrays:

When using

limit.value as limit.text for limit in limits

Assign the label of the <option> tag as limit.text
Store the value of limit.value in the select element's ng-model

For more information, check out the discussion on Stack Overflow: AngularJS ng-options not rendering values.

If you want to bind a select tag to both value and display members, you can use ng-options.

For example, if you have the following data source:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

You can use the code below to bind your select tag to the value and name properties:

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

It works perfectly!

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

After a year since the initial question was asked, I found myself searching for the answer as none of the responses provided the solution I was looking for.

The query revolved around how to select an option, but what no one seems to have mentioned is that these two actions are NOT identical:

Consider this scenario:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

If we attempt to designate a default option like so:

$scope.incorrectlySelected = { label: 'two', value: 2 };

This method will NOT yield the desired result. However, if you opt for selecting the option in this manner:

$scope.correctlySelected = $scope.options[1];

You will find that it indeed gets the job done.

Although both objects share similar properties, AngularJS treats them as distinct entities due to its comparison based on reference.

For further clarification, check out the fiddle at http://jsfiddle.net/qWzTb/.

User frm.adiputra has provided the accurate solution to this question, highlighting the necessity of explicitly controlling the value attribute of option elements.

It is crucial to note that in this context, "select" serves as a placeholder for an expression rather than a keyword. For further clarification on expressions such as "select," please consult the comprehensive list provided below in relation to ng-options directive usage.

The syntax utilized in the initial query:

ng-options='select p.text for p  in resultOptions'

is incorrect in essence.

Upon reviewing the expression options, it appears that utilizing trackexpr might offer a viable approach for specifying values within arrays of objects, particularly when used in conjunction with grouping mechanisms.

Referencing AngularJS' documentation regarding ng-options:

• array / object: an expression evaluating to an array / object for iteration purposes.
• value: locally denotes each item within the array or each object property during iteration.
• key: locally references an object property name during iteration.
• label: the resulting expression acts as the label for elements. Typically referencing the value variable (e.g. value.propertyName).
• select: the outcome of this expression binds to the parent element's model. If unspecified, the select expression defaults to the value.
• group: the expression outcome facilitates option grouping using DOM elements.
• trackexpr: essential for array of objects scenarios. The expression outcome identifies objects within the array, commonly linking back to the value variable (e.g. value.propertyName).

Choosing an option in ng-options may prove to be challenging depending on how the data source is configured.

After facing some difficulties, I created a sample with the most common data sources that I typically use. You can access it here:

http://plnkr.co/edit/fGq2PM?p=preview

Here are some key points to keep in mind to ensure ng-options works smoothly:

1. Typically, you will retrieve options from one source and the selected value from another source.
2. In most cases, it is simpler and more logical to populate the select with options from one source and then set the selected value programmatically.
3. AngularJS allows select controls to contain more than just "key | label." Ensure you handle objects appropriately based on your requirements.
4. The method of setting the dropdown/select control's value depends on the structure of the data. If using objects as keys, looping through the options may be necessary to select the correct item.

You can replace 'savedValue' with the relevant property in another object, such as $scope.myObject.myProperty.

In my opinion, Bruno Gomes' answer stands out as the top solution.

However, fret not about setting the value property of select options as AngularJS handles that task seamlessly. Allow me to elaborate further.

Take a look at this fiddle

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

The fiddle output demonstrates that regardless of whether you choose custom values or auto-generated ones by AngularJS for select box options, it will not impact your output unless you utilize jQuery or other libraries to manipulate the select combo box options' values.

In order to distinguish between values and labels in a select box, make use of the track by property.

Give this code a try:

<select ng-options="item.label for item in items track by item.id"></select>

This will associate each label with the text property and each value with the id property from the items array.

Consider the following scenario:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

Developers often find it challenging to work with ng-options, especially when it comes to dealing with empty selected values or handling JSON objects within ng-options. Here are some exercises I have done to tackle this issue.

Goal: To iterate through an array of JSON objects using ng-option and automatically select the first element.

Data:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

In the select tag, I needed to display "xyz" and "abc", with "xyz" being pre-selected effortlessly.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&>
</code></pre>

The code above should help simplify the process and eliminate any confusion.

For more insights, check out this reference:

After reading the informative tutorial on ANGULAR.JS: NG-SELECT AND NG-OPTIONS, I was able to effectively address the issue at hand:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<div ng-model="result">
   <span ng-repeat="(item,info) in dataset" value="{{item}}">{{info}}</span>
</div>

Execute the code snippet to observe the different outcomes. Below are some quick notes for better understanding

1. Example 1(Object selection):-

   ng-option="os.name for os in osList track by os.id"

   . It is crucial to have track by os.id, and it must be included, while os.id as should NOT be placed before os.name.
   • The ng-model="my_os" should be set to an object with the key as id, such as my_os={id: 2}.

2. Example 2(Value selection) :-

   ng-option="os.id as os.name for os in osList"

   . Here track by os.id should NOT be used, and os.id as should be placed before os.name.
   • The ng-model="my_os" should be set to a value like my_os= 2

For more details, refer to the provided code snippet.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

As many have mentioned previously, when dealing with data structured like this:

regions : [
              {
                 "id": 1,
                 "name": "North America"
             },
              {
                  "id": 2,
                  "name": "Europe"
              },
              {
                  "id": 3,
                  "name": "Asia"
              }
         ]

The usage would typically look something like this:

<select
    ng-model="selectedRegion"
    ng-options="area.name for area in regions">
</select>

To avoid an initial empty value in your Controller:

 $scope.selectedRegion = $scope.regions[0];

 // Watch changes to capture selected value
 $scope.$watchCollection(function() {
   return $scope.selectedRegion
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("No change detected: " + $scope.selectedRegion)
     } 
     else {
       console.log('New value selected: ' + $scope.selectedRegion)
     }
 }, true)

Here is my approach to solving this issue within an older application:

Using HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

Implemented in JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

The option values are correctly displayed in my HTML.

Exploring ngOptions directive:

$scope.options = [{name: 'apple', price: 2},{ name: 'banana', price: 3},{ name: 'cherry', price: 4}];

• Scenario-1) Displaying label for each value in array:

  <div>
      <p>Selected fruit is : {{selectedFruit}}</p>
      <p>Price of selected fruit is : {{selectedFruit.price}} </p>
      <select ng-model="selectedFruit" ng-options="option.name for option in options">
      </select>
  </div>
  

Output Breakdown (Assuming the first fruit is selected):

selectedFruit = {name: 'apple', price: 2} // [by default, selected item is equal to the value option]

selectedFruit.price = 2

• Scenario-2) Using a different label as the selection in the dropdown:

  <div>
      <p>Selected fruit is : {{selectedFruit}}</p>
      <select ng-model="selectedFruit" ng-options="option.price as option.name for option in options">
      </select>
  </div>
  

Output Breakdown (Assuming the first fruit is selected): selectedFruit = 2 // [the selected part is option.price]