ng-options

I have this structure: model = [ { name: 'name1', items: [ { name: 'subobj1' }, { name: 'subobj2' }] }, { name: 'name2', items: [ { name: 'subobj1' }, { name: 'subobj2' }] }, .... ] Question is: How do I write ngOptions attrbiute to output this object like this?: <select> <optgroup label="name1"> <label>subobj1</label> <label>subobj2></label> </optgroup> .... </group> Also - ngRepeat is not an option. I have to do this ngOptions alone for plugin being used to work. Ilan Frumer ngOptions doesn't support multi-dimensional arrays. You must flatten your array first. Read more in this answer . I

I try to change the selected index of ng-options after ajax call, but it won't change. //Html Section... <select id="fooId" ng-model ="foo.formula" ng-options="formulas as name for (formulas, name) in the_formula"></select> //End Html Section... //js file... //get list of formula from server... TheSource.Get.then(function(response){ $scope.the_formula = response.the_formula; }); //do something awesome, then.. //binding data from server... TheData.Get.then(function(response){ //binding the data to view... //all of the element is binding, except the ng-options part.. $scope.foo = response; //not

I'm using angular ng-options to show a with several options as the choices of parent category of the current category, basically these options contain all the existing categories, and I need to exclude the current category from ng-options, which quite make sense because a category cannot be the parent category of itself. So how do I do that? Currently I have the following code: <tr ng-repeat="category in allCategories"> <th ng-bind="category.name"></th> <th> <select ng-options="everyCategory.name for everyCategory in allCategories"> <option value="">Select parent category</option> </select> <

I'm using ngOptions to built a selection menu but one of my labels has an HTML entity in it & . The label shows up as Books & Stuff not Books & Stuff . My jade is this: select(ng-show="isType === 'select'", id="{{id}}", ng-model="model", ng-options="o.id as o.label for o in options") How can I get HTML entities to display properly? Update I'm trying the answer by sal: select(ng-show="isType === 'select'", id="{{id}}", ng-model="model") option(ng-repeat="o in options", ng-bind-html="o.label", value="{{o.id}}") An this displays the correct html entity but the correct option is not selected any

I made a fiddle replicating my problem here: http://jsfiddle.net/U3pVM/2840/ As the title suggests, I can't set the selected value of a select populated using ng-options. I have searched and tried all possible solutions that I found. Any help or suggestions would be appreciated! HTML <div ng-app> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <select ng-model="ddlRooms" ng-options="r.id as r.Name for r in Rooms"> </select> {{$scope.test}} </div> </div> Angular function TodoCtrl($scope) { $scope.Rooms = [{ Name: 'Toddler', id: 1 },{ Name: 'other', id: 2 }]; $scope.options = [{ Name: 'other', id: