ng-options

I'm facing a strange problem when using ng-options with AngularJS. My scenario is pretty straight forward: Bind a value with ng-model to be the selected option Load the values of the 'select' from a backend Bind the loaded values to the 'select' My objects loaded from the backend is a key/value like: { Value: "my_value", Name: "my_name" } And everything works fine... Until Name and Value are the same. Then angular won't bind the selected value correct anymore. I have created this plunker: https://plnkr.co/edit/tUBXIpMTBAHK2Xh8aDu6?p=preview To demonstrate the problem. My controller: var app =

This seems to be a really straight forward code, but I cannot figure out why it is not working. I want to filter the 'model' dropdown by selected 'make', Make: <select ng-model="makeng" ng-options="option.display for option in makes"> <option ng-disabled="true" ng-selected="true" value="">Select a make</option> </select> Model: <select ng-model="modelng" ng-options="option.display for option in models | filter:{make:makeng}"> <option ng-disabled="true" ng-selected="true" value="">Select a model</option> </select> here is the plunker http://plnkr.co/edit/bHb9AScd2m58acUUyI0t?p=preview Problem

I have my group by ng-options looks like this <select ng-model="selected" ng-options="d.title group by d.group for d in data"></select> Here is my data $scope.data = [ { group:"", title:"No GroupA" }, { group:"Group_1", title:"1" }, { group:"", title:"No GroupB" }, { group:"Group_2", title:"2" }, { group:"", title:"No GroupC" } ]; the problem is that this creates the optgroup on the bottoms of this select menu, not the order as same as my data list. No GroupA No GroupB No GroupC [Group_1] 1 [Group_2] 2 i want to produce: No GroupA [Group_1] 1 No GroupB [Group_2] 2 No GroupC Here is Fiddle

I am having a list of country along with its corresponding states. Now i want to bind the country and state value in dropdown control when open in edit mode. This is the fiddler link: http://jsfiddle.net/mariapithia/4yj8rprp/9/ <tr data-ng-repeat="friend in friends"> <td><strong>{{ friend.Id }}</strong></td> <td> <p data-ng-hide="friend.editMode">{{ friend.firstname}}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.firstname" /> </td> <td> <p data-ng-hide="friend.editMode">{{ friend.lastname}}</p> <input data-ng-show="friend.editMode" type="text" data-ng-model=

I am using AngularJS to populate my select options content dynamically from an array of objects in my controller. My objects has a property named userProfileName . How would it be possible to remove the blank option that I am getting at the top? Also, I would want to select the first profile Profile 1 by default. How can this be done? My Snippet of code is here: <select id="requestorSite" ng-model="selectedUserProfile" ng-options="userProfile.userProfileName for userProfile in userProfiles" ng-selected="" class="form-control displayInlineBlock width40per marginLeft15"> </select> My controller

I'm using a ng-options for a select dropdown menu. I would like to use different color for an option depending on a condition: select(ng-model='myCompany', ng-options='company.code as company.name for company in companies' **if company.active -> text-color=green**) Is it possible to do that? Edit (my jade code): form(role='form', name='addForm', novalidate, rc-submit="add()") .form-group div.row div.col-xs-12.col-md-3 select.form-control(ng-model='form.contract', ng-options='contract as contract.number for contract in contracts', options-class="{true:'active',false:'inactive'}[active]") If you

I'm trying to translate a select drop-down and I don't like the way I'm doing it, because it's cumbersome and it bypasses the whole angular-translate framework. The locale data looks like {"lang": {"label": "text", "select": {"k1": "var1", "k2": "var2"}}} and if I plonk the "select" member in the controller scope, I can write something like "k as v for (k,v) in scopedvar" in the ng-options of the select. Basically I'd like translate to do the language resolution and then get out of the way and return the map of localizations for my options. If it made sense, something like: "k as v for (k, v)

How to use ng-options. $scope.fieldTable = [ { filed:"text", title:"Global" }, { field: "relatedentity", title: "Entity" }, { field:"title", title:"Title" }, { field: "content", title: "Content" } ] I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is { filed:"text", title:"Global" } Can anyone help? var app = angular.module('stack', []); app.controller('MainCtrl', function($scope) { $scope.fieldTable = [{ field: "text", title: "Global" }, { field: "relatedentity", title: "Entity" }, {

I have ng-repeat option: <option ng-repeat="year in data.dateList.year" value="{{year.id}}" ng-disabled="(year.id < 2015) ? true : false"> You can see ng-disabled="(year.id < 2015) ? true : false" Why my option is not disabled if year.id less than 2015? This is my new code: <div class="itm" ng-repeat="a in range(num) track by $index"> <option ng-repeat="year in data.dateList.year" ng-disabled="(year.id) < formData.beginYear[$index]"> {{year.value}} </option> </div> You need to use ng-options here which has way to disable the options <select ng-model="year" ng-options="year.id disable when