How to get Select2 tags initializing correctly with Angular UI when option groups are used?

Download latest angular-ui select2 and update line 24:

repeatOption = tElm.find( 'optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]' );

Now its supports option groups.

Well i've gotten to the same obstacle and want to share my solution. Select2 was not watching the optgroup ng-repeat attribute. You have to add this to your angular ui select2 directive.

Change this:

repeatOption = tElm.find('option[ng-repeat], option[data-ng-repeat]');

To that:

repeatOption = tElm.find('optgroup[ng-repeat], optgroup[data-ng-repeat], option[ng-repeat], option[data-ng-repeat]');

Not sure if this is a clean solution but it works for me.

Github issue

select2 supports <optgroup> through hierarchical data, you can to pass-through a structured object as data instead of using ng-repeat, see
http://ivaynberg.github.io/select2/#data_array
Also search for "Example Hierarchical Data" in the page.

JS:

$scope.model = {    data: [        // both 'id' and 'text' are needed unless you write custom functions        { text: 'cat1', children: [{id: 1, text: 'one'}] },        { text: 'cat2', children: [{id: 2, text: 'two'}] }    ]];

HTML:

<input type="hidden" multiple ui-select2="model"     ng-model="selectedOptions" style="width: 300px">

selectedOptions will be an array of objects: [ {id: 1, text: 'one'} ].

For pass-through via the directive, see Angular UI's demo:
http://plnkr.co/edit/gist:4279651?p=preview

EDIT: update code and reference to site