javascript - Using ng-options with option select in AngularJS -

i'm using angularjs, , want use ng-options select tag display options grouped optgroups.

this array want use in select option:

$scope.mylist = [     {       "codegroupcompetence": 1,       "titre": "tech. de production / exploitation",       "activated": true,       "competences": [         {           "codecompetence": 7,           "titre": "tech. exploitation",           "activated": true         },         {           "codecompetence": 8,           "titre": "tech. postes de travail",           "activated": true         },         {           "codecompetence": 9,           "titre": "tech. réseaux",           "activated": true         },         {           "codecompetence": 10,           "titre": "tech. desk",           "activated": true         },         {           "codecompetence": 11,           "titre": "tech. téléphonie",           "activated": true         },         {           "codecompetence": 12,           "titre": "tech. autre",           "activated": true         }       ]     },     {       "codegroupcompetence": 2,       "titre": "etudes, conception, modelisation",       "activated": true,       "competences": [         {           "codecompetence": 5,           "titre": "concepteur uml, merise, ...",           "activated": true         },         {           "codecompetence": 13,           "titre": "admin windows",           "activated": true         },         {           "codecompetence": 14,           "titre": "admin unix",           "activated": true         },         {           "codecompetence": 15,           "titre": "admin linux",           "activated": true         },         {           "codecompetence": 16,           "titre": "administrateur as400",           "activated": true         },         {           "codecompetence": 17,           "titre": "administrateur mainframe ibm",           "activated": true         },         {           "codecompetence": 18,           "titre": "administrateur autres systèmes",           "activated": true         }       ]     },     {       "codegroupcompetence": 3,       "titre": "admin systemes",       "activated": true,       "competences": [         {           "codecompetence": 6,           "titre": "urbaniste si",           "activated": true         }       ]     }   ]; 

in order display list using group by feature in ng-options created new array following :

  $scope.competences = [];      mylist.foreach(function(group){           group.competences.foreach(function(competence){             $scope.competences.push({               id : competence.codecompetence,               titre : competence.titre,               group : group.titre             })           });         }); 

and how display select option :

<select ng-model="tipost"          ng-options="competence.id competence.titre group competence.group competence in competences track competence.id">      </select> 

unfortunately doesn't work reason, cant figure out it.

so please, how can solve ?

another question : isn't there other method use first array group by ?

thanks in advance.

this jsfiddle example :

http://jsfiddle.net/rtcp3/615/

i've forked fiddle here:

a couple of things noticed: removed track clause in repeat , added scope vairable $scope.tipost controller.

<select ng-model="tipost"          ng-options="competence.id competence.titre group competence.group competence in competences">      </select> 

controller edits: forgot $scope on mylist variable, can use $scope.tipost assign preselected option , retrieve selected option well.

$scope.tipost = 5;  $scope.mylist.foreach(function(group){           group.competences.foreach(function(competence){             $scope.competences.push({               id : competence.codecompetence,               titre : competence.titre,               group : group.titre             })           });         }); 

in case console telling wrong.