ngSelect - 任意深度

Question

在我的应用程序中，我有一组具有以下结构的对象

[{"ID":1, "parentID":0, "name":"Parent #1"}, 
{"ID":2, "parentID":0, "name":"Parent #2"}, 
{"ID":3, "parentID":1, "name":"Child #1 1"}, 
{"ID":4, "parentID":3, "name":"child #1 2"},
{"ID":5, "parentID":2, "name":"child #2 1"},
{"ID":6, "parentID":5, "name":"child #2 2"}]

我想将此作为选择菜单呈现，该菜单允许用户选择叶节点，同时仍然输出不可选择的父节点以显示结构的层次结构。

我尝试了一些方法，其中最成功的方法是，在我的角度模板中，有以下几点。

<div ng-repeat="(idx, category) in $scope.allCats">
    <select ng-model="$scope.cats[idx]" 
            ng-options="cat as cat.name group by $scope.parentName(cat.parentID, idx) for cat in $scope.allCategories track by cat.ID">
        <option value="">Select A Category</option>
    </select>
</div>

$scope.allCats是上面的数组，$scope.parentName()方法返回一个字符串。

以下屏幕截图展示了此问题。即，所有父项目都显示两次，一次显示为<option>，一次显示为<optgroup>，而我更确切地说，它们只显示为可选项，但显然是父项，并且结构的层次结构没有得到维护;具有祖先和后代的子节点不会出现在正确的“家庭树”中。结构

如何更改注入的数据或角度模板以实现我想要的行为？

即显示由parentID属性定义的整个层次结构，以便每个族共享一个共同的祖先，并且父项只出现一次。

我怀疑由于可能存在多个级别的后代而导致这种情况变得复杂，因为我希望尽可能保持这种一般性。