First change in ng-options display empty always blank

Question

When I change the value from the select list, the first change display is always empty, and after the second change I have the display

I try with this code :

<select name="app_category_id" ng-model="campaign.app_category" ng-options="app_category.id as app_category.name group by app_category.app_category_pool[0].name for app_category in app_category_list | orderBy:['app_category_pool[0].name', 'name'] track by app_category.id" required>
</select>

My list :

$scope.app_category_list = [{
    "id": 31,
    "code": "RED",
    "name": "Red",
    "app_category_pool": [{
        "id": 1,
        "code": "CATEGORY_1",
        "name": "Category 1"
    }]
}, {
    "id": 32,
    "code": "BLUE",
    "name": "Blue",
    "app_category_pool": [{
        "id": 1,
        "code": "CATEGORY_1",
        "name": "Category 1",
    }]
}, {
    "id": 33,
    "code": "YELLOW",
    "name": "Yellow",
    "app_category_pool": [{
        "id": 2,
        "code": "CATEGORY_2",
        "name": "Category 2",
    }]
}]

After the first change (selection of another item from list) :

After the second change (selection of another item from list) :

I would like to use the id and group by category

When I load my page, my campaign.app_category own a value, after I select another item and I have a display blank:

$scope.campaign = {
    app_category: {
        "id": 31,
        "code": "RED",
        "name": "Red",
        "app_category_pool": [{
            "id": 1,
            "code": "CATEGORY_1",
            "name": "Category 1"
        }]
    }
}

I use angular 1.5.8

SOLVED

http://plnkr.co/edit/6XYAQXG6hVh2J2PkfXIG?p=preview

Answer 1

Just set the HTML as follows:

ng-options="app_category as...

Remove .id and let the object only.