Select first option in ng-options (AngularJS)

Question

I am working Group and subGroup using ng-options only..

Where, First dropdown display groups

and select dropdown display the sub option inside groups.

when I select any group in group dropdown.. second dropdown does not selecting the default first option.

JS:

var app = angular.module("md", [])
         .controller("crt", function ($scope) {
             $scope.items = [{
                 id: 1,
                 label: 'aLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'aSubItem' }
             }, {
                 id: 2,
                 label: 'bLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'bSubItem' }
             },
             {
                 id: 3,
                 label: 'cLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'cSubItem' }
             }, {
                 id: 4,
                 label: 'dLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'dSubItem' }
             }, {
                 id: 5,
                 label: 'eLabel',
                 dis: false,
                 group: "A",
                 subItem: { name: 'eSubItem' }
             }, {
                 id: 6,
                 label: 'fLabel',
                 dis: true,
                 group: "B",
                 subItem: { name: 'fSubItem' }
             }, {
                 id: 7,
                 label: 'gLabel',
                 dis: false,
                 group: "A",
                 subItem: { name: 'gSubItem' }
             }, {
                 id: 8,
                 label: 'hLabel',
                 dis: true,
                 group: "A",
                 subItem: { name: 'hSubItem' }
             }, {
                 id: 9,
                 label: 'iLabel',
                 dis: false,
                 group: "B",
                 subItem: { name: 'iSubItem' }
             }, {
                 id: 10,
                 label: 'jLabel',
                 dis: true,
                 group: "A",
                 subItem: { name: 'jSubItem' }
             }];
             $scope.opt = $scope.items[0];
             $scope.serach = $scope.items[0];
         });
        app.filter('unique', function () {
            return function (input, key) {
                var unique = {};
                var uniqueList = [];
                for (var i = 0; i < input.length; i++) {
                    if (typeof unique[input[i][key]] == "undefined") {
                        unique[input[i][key]] = "";
                        uniqueList.push(input[i]);
                    }
                }
                return uniqueList;
            };
        });

HTML:

Select the group:<br />
    <select ng-model="serach" ng-options="i as i.group for i in items | unique:'group' | orderBy : 'group' track by i.group">
        <option value="">Select ALL</option>
    </select><br />
    SubGroup:<br />
    <label ><input type="checkbox" name="name" ng-model="reverse" />reverse me</label>
    <select ng-model="opt" ng-options="i.label group by i.group for i in items  | orderBy:reverse ?'group':'-group' | filter :serach.group:true track by i.subItem.name">
        <!--<option selected="selected">Please Select</option>-->
    </select>

Fiddler here

Answer 1

I think adding ng-change event on group select box will work for you. You have to just set below code in ng-change event.

$scope.opt = $scope.search

https://jsfiddle.net/6se2atu5/7/

Answer 2

You can use :

$scope.opt = $scope.serach == null ? $scope.items[0] : $scope.serach;

Fiddler