AngularJSで 連動するSelectタグを作成する

大項目と詳細が定義されたJsonを用いる前提で、ユーザーの大項目の選択によって、詳細の内容を変更したい場合。
また、UIはSelectボックスを想定しています。

data.js

$data = [{
    top_key: 't1',
    top_label: '大項目1',
    details: [
        { key: 'd1', label: '大項目1の詳細1' },
        { key: 'd2', label: '大項目1の詳細2' }
    ]
},
{
    top_key: 't2',
    top_lebel: '大項目2',
    details: [
        { key: 'd3', label: '大項目2の詳細1' },
        { key: 'd4', label: '大項目2の詳細2'}
    ]
}];

filterでなんとかなったりします。

sample.html

<div class="top">
    <select ng-model="top"
        ng-options="t.top_key as t.top_label for t in data"></select>
</div>
<div class="detail">
    <select ng-model="detail"
        ng-options="d.key as d.label for d in (data | filter:{top_key:top})[0].details"></select>
</div>

処理の流れとしては

• $dataに関して、top_keyプロパティの値でfilterして、それぞれに対応するdetails配列を取得
• あとはそのコレクションで普通にselectを表示してあげる

ただ、arrayをfilterした結果はarrayなので、unwrapするために[0]でアクセスしているのがかっこ悪い。また、ng-modelの初期値には気をつける必要があるので、もっとかっこいい方法を知っている方がいたら教えて下さいm m