grouped_select.js

form.handlebars

{{view Ember.GroupedSelect
  groupedContentBinding="App.groupedServiceCodes"
  contentBinding="App.flattenedServiceCodes"
  selectionBinding="service_code"
  optionLabelPath="content.description"
  optionValuePath="content.id"
}}

<!-- groupedServiceCodes is an array of Ember.Objects with a label, and content -->
<!-- flattenedServiceCodes is the content arrays from groupedServiceCodes concatted together so they have the same order as the select -->

grouped_select.js

Ember.GroupedSelect = Ember.Select.extend({
  classNames: ['ember-grouped-select'],
  defaultTemplate: Ember.Handlebars.compile('{{#if view.prompt}}<option value>{{view.prompt}}</option>{{/if}}{{#each view.groupedContent}}{{view Ember.SelectOptGroup labelBinding="label" contentBinding="content"}}{{/each}}'),
});

Ember.SelectOptGroup = Ember.View.extend({
  tagName: 'optgroup',
  classNames: [],
  attributeBindings: ['label'],
  defaultTemplate: Ember.Handlebars.compile('{{#each this.content}}{{view Ember.SelectOption contentBinding="this"}}{{/each}}'),

  // proxy to the Select
  optionLabelPath: function() {
    return Ember.getPath(this, 'parentView.optionLabelPath');
  }.property('parentView.optionLabelPath'),
  optionValuePath: function() {
    return Ember.getPath(this, 'parentView.optionValuePath');
  }.property('parentView.optionValuePath'),
  selection: function() {
    return Ember.getPath(this, 'parentView.selection');
  }.property('parentView.selection'),
  multiple: function() {
    return Ember.getPath(this, 'parentView.multiple');
  }.property('parentView.multiple')
});

//I have this main application with some common properties
Mleg_CS = Ember.Application.create({
currencyPair: null,
totalLegsCreated: null,
totalStripsCreated:null,
groupedProductsList : Ember.A([
Ember.Object.create({label: 'Vanillas', content: Ember.A(Ember.Object.create({description:"EV", id:"EV"}),Ember.Object.create({description:"AV", id:"AV"}) )}),
Ember.Object.create({label: 'Barriers', content: Ember.A(Ember.Object.create({description:"KO", id:"KO"}), Ember.Object.create({description:"RKO", id:"RKO"}) ,
Ember.Object.create({description:"KI", id:"KI"}),Ember.Object.create({description:"RKI", id:"RKI"}),Ember.Object.create({description:"DKO", id:"DKO"}),
Ember.Object.create({description:"DKI", id:"DKI"}),Ember.Object.create({description:"BKO", id:"BKO"}),Ember.Object.create({description:"BKI", id:"BKI"}),
Ember.Object.create({description:"KIKO", id:"KIKO"}),Ember.Object.create({description:"KIKOSeq", id:"KIKOSeq"}) )}),
Ember.Object.create({label: 'Touches', content: Ember.A(Ember.Object.create({description:"OT", id:"OT"}),Ember.Object.create({description:"OTH", id:"OTH"}),
Ember.Object.create({description:"NT", id:"NT"}),Ember.Object.create({description:"DNT", id:"DNT"}),Ember.Object.create({description:"DOT", id:"DOT"}),
Ember.Object.create({description:"BNT", id:"BNT"}),Ember.Object.create({description:"BOT", id:"BOT"}),Ember.Object.create({description:"OTKO", id:"OTKO"}),
Ember.Object.create({description:"OTKOSeq", id:"OTKOSeq"}) )})
]),
flattenedProductsList : Ember.A(["Vanillas","EV","AV","Barriers","KO","RKO","KI","RKI","DKO","DKI","BKO","BKI","KIKO","KIKOSeq","Touches","OT"])
});

I copied the code from github as you posted and my view template is as follows.
{{view Ember.GroupedSelect
groupedContentBinding="Mleg_CS.groupedProductsList"
contentBinding="Mleg_CS.flattenedProductsList"
selectionBinding="Mleg_CS.legsStripsSecController.productType"
optionLabelPath="content.description"
optionValuePath="content.id"
}}

when I used obj.get("content") in flattenedProductsList like this,
flattenedProductsList : [].concat(object.get("content"),object.get("content"),object.get("content"))
it gives me object is udnefined error.

with the code above I am always getting error
'TypeError: b.addArrayObserver is not a function'

could you please help to find what I am doing wrong? Your help is highly appreciated.