Develop Reference

HTML select using ng-options with multiple "default" options

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown

Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.

FIlling a Dropdown Box using angularJS

I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.
this is the revised angular controller

Official way of generating options in AngularJS:
<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
<option value=""></option>
</select>
Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.
ng-model will be the variable which will save your selection from allUsers.

You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.
Example from official documentation:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions

ng-model in <dropdownlist> and <input type="text"> Angularjs / HTML / Nodejs / REST

I am using one $scope.sample variable to receive ng-model from two input fields. It is working fine. I do this: ng-model="sample.first" and ng-model="sample.second".
Then, I tried to remove the first input and use a dropdownlist instead. The dropdownlist is filled by a different variable $scope.list using the ng-model="list". The dropdownlist is filled correctly. However, I need to put the selected item in the dropdownlist to the $scope variable sample.first. This is not working. How can I do this?
Thank you,
Rafael

In Angular to do a select element, you would use this syntax:
<select ng-model="sample.first" ng-options="item.property for item in list"></select>
Where "item" is simply an object in your $scope.list array. The select should be properly filled and when an item is selected, it will set that item as your ng-model value, "sample.first".

I got it to work with :
##### <select ng-model="sample.first">
<option ng-repeat="list in lists" value="{{list.name}}">{{list.name}}</option>
</select> #### Using $scope.lists= [{name: "Joe"}] on the controller.

Get rid of blank entry in select tag

I have a number of items that get their data from a Json object and populate it using angular.
<select ng-model="MyCtrl.cargoList">
<option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option>
</select>
And whenever I load the form, I get something like this in my console:
<select ng-model="MyCtrl.cargoList">
<option value="? object:25 "?></option>
<option value="">Gloves</option>
<option value="">Jacket</option>
<option value="">Shoes</option>
</select>
I can get the values to appear just fine, but I can't seem to get rid of the very first option. I don't mind the select box showing the very first element in the list, but I don't want it to be a blank line. How do I get rid of it?

You need to select 1st option by default on ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model name should not be same as that of your cargoList.
Markup
<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name">
<option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option>
</select>
Demo Plunkr

Use ngOption <option>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
I have used following expression
label for value in array
HTML
<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList">
</select>
and In your controller set model value as first element of list
this.cargo = this.cargoList[0]
Also note: You can use MyCtrl.cargoList as model as well as array So you should use another variable to hold the model value.

Use ng-options instead of ng-repeat
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select>
You can fine tune the labels/values further if you like, check the documentation here - https://docs.angularjs.org/api/ng/directive/ngOptions
You can ng-init, or set the first value to defualt, something like
MyCtrl.selectedListItem = MyCtrl.cargoList[0]
So if you want a function to detect you have changed the value of the select you would use ng-change like so :
<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select>
In your controller
$scope.selectChanged = function(){
//apply your logic
};

angular drop down selected ng-model not binding

I'm currently having a problem with selecting drop downs which are not working correctly with angularjs. Couldn't find anything that relates to my problem. It seems odd.
I am a newbie to angularjs so please forgive my ignorance
I am currently trying to retrofit angularjs onto my MVC5 application.
Here are the issues;
When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option
Once you change the selected option on the drop-down, selected the object in scope is now empty?
Here is the code

The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:
ng-options="o.text for o in options"

You should change your
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
to
<select ng-model="selected" ng-options="o as o.text for o in options"></select>
to make it work as you expected.
because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.

<div>
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
<br />Code: {{ selected.code }}
<br />Text: {{ selected.text }}
</div>
Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".