【AngularJS】ネストしたデータをng-repeatで表示させる

三階層ぐらいにネストしたデータをng-repeatで表示させてみた。

実装

// データ構造はこんな感じです
data:[
    {"id":1,"name":"最初の項目","status":1,"created_date":"2019-01-01 00:00:00","updated_date":"2019-01-01 00:00:00",
    "nest1":[
        {"id":2,"name":"説明","status":1,"created_date":"2019-01-01 00:00:00","updated_date":"2019-01-01 00:00:00",
        "nest2":[
            {"id":3,"name":"使い方","status":1,"created_date":"2019-01-01 00:00:00","updated_date":"2019-01-01 00:00:00"
            }]
        }]
    },
    {...},
    {...}
]

index.html

<div id="menu">
    <ul class="contents">
        <li ng-repeat="(i, first) in data">
            <a href ng-click="getInfo(first.id, first.status)">{{first.name}}</a>
            <ul>
                <li ng-repeat="(j, second) in first.nest1">
                    <a href ng-click="getInfo(second.id, second.status)">{{second.name}}</a>
                    <ul>
                        <li ng-repeat="(k, third) in third.nest2">
                            <a href ng-click="getInfo(third.id, third.status)">{{third.name}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

補足

・多分、ng-repeatで表示させる手段より、データ構造について考える方が面倒な気がする…