Select2 Default selected from optgroup

Question

Need some help here. I inherited this code and I am not 100% on what needs to be done here but I need to set the default selected item to be the first group/first option instead of the data-placeholder . I tried using ng-init but I wasn't able to get it to work. How can I achieve this with the below code?

<div ng-repeat='searchField in searchFields.device'>
    <select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
        <option value=''></option>
        <optgroup label='FooGroup1'>
            <option value='foo_option1'>foo_option1</option>
        </optgroup>
        <optgroup label='FooGroup2'>
            <option value='foo_option1'>foo_option1</option>
            <option value='foo_option1'>foo_option1</option>
        </optgroup>
    </select>
....

ACTUAL HAML

%div(ng-repeat="searchField in searchFields.message")
  %select(ng-model="searchField[0]" ui-select2 data-placeholder="Search Field" ng-init="searchField[0] = ")
    %option(value="")
    - devices_optgroup.each do |group, attrs|
      %optgroup{label: group}
        - attrs.each do |attr, label|
          %option(value="#{attr}")= label

Answer 1

The <option> element allows for an optional selected attribute. From MDN :

selected If present, this Boolean attribute indicates that the option is initially selected. If the element is the descendant of a element whose multiple attribute is not set, only one single of this element may have the selected attribute.

So if you want to select the first element of the first <optgroup> you can do something like this:

<select data-placeholder='Search Field' ng-model='searchField[0]' ui-select2>
    <option value=''></option>
    <optgroup label='FooGroup1'>
        <option value='foo_option1' selected>foo_option1</option>
    </optgroup>
    <optgroup label='FooGroup2'>
        <option value='foo_option1'>foo_option1</option>
        <option value='foo_option1'>foo_option1</option>
    </optgroup>
</select>