AngularJs default selection on drop down with headers

Question

I have a dropdown with headers I have created, which looks like this:

<div class="form-group" ng-class="{ 'has-error': saveForm.attributeId.$invalid && !saveForm.attributeId.$pristine }">
    <select class="form-control" name="name" ng-model="controller.model.attributeId" ng-disabled="!controller.criteria.length" required>
        <optgroup ng-repeat="criteria in controller.criteria" label="{{ criteria.name }}">
            <option ng-repeat="attribute in criteria.attributes" value="{{ attribute.id }}">{{ attribute.name }}</option>
        </optgroup>
    </select>
</div>

I got this from this stackoverflow: Angular JS - how to add a header in dropdown list and it works fine (as in it has headers). But, now I have to add a default selection. I tried first with this:

selected="{{ attribute.id === controller.model.attributeId }}"

which did nothing. Then I tried with this:

ng-selected="{{ attribute.id === controller.model.attributeId }}"

This also looked like it did nothing, but when I inspected the elements, I could see that the option I wanted to be selected had this html:

<option ng-repeat="attribute in criteria.attributes" value="101" ng-selected="true" class="ng-binding ng-scope">Light</option>

But it didn't appear to be selected. Can someone tell me what I am doing wrong?