Select values is updated using setValue but opens to default value

[Nav Dhi]

I am using setValue (highlighted in code below) to select a specific option in a group-enabled select.  The value array returned by 'getValue' matches what I am setting.  However, when this mobiscroll is actually displayed, it does not show the selection.  Instead, it shows the first element only as if I never called the setValue.  A sample of my select html is also pasted below for reference.

Please advice.  Thanks in advance!

 $('#categorySelector').mobiscroll().select(
 {
 theme: 'mobiscroll',
 display: 'bottom',
 mode: 'scroller',
 group: true,
 onClose: function(val, btn, inst)
 {
 (btn === "set") ? context.syncCategory() : {};
 }
 });
 $('#categorySelector').mobiscroll('setValue', [2, 'three-two'], true, true, 0, true);

<select class="form-control" id="categorySelector">

<optgroup label="group-one">

<option value="one-one"  >all</option>

<option value="one-two"  >activities</option>

</optgroup>

<optgroup label="group-two">

<option value="two-one"  >all</option>

<option value="two-two"  >activities</option>

</optgroup>

<optgroup label="group-three">

<option value="three-one"  >all</option>

<option value="three-two"  >activities</option>

</optgroup>
</select>