复杂的嵌套数组，用于选择具有AngularJS的框

Question

我有一个需要解决的问题，并且是AngularJS的新手。我尽可能多地看着视频，官方文档和谷歌搜索，但无济于事。

基本上我拥有的是控制器中的一些嵌套数据，如：

function SomeController($scope) {
  $scope.someArray = [
    {
      type: 'Dog',
      name: 'Sarah',
      children: [
        {
          type: 'Dog',
          name: 'Henry',
          children: [
            {
              type: 'Dog',
              name: 'Bob',
              children: []
            }
            . . .
          ]
        }
        . . .
      ]
    }
    . . .
  ];
}

假设，这些可以嵌套无限深。实际上，他们很少会超过2-3级深度。同样，我想编写我的代码来处理这种情况，无论它多么罕见。

对于上面的示例，这应该适用的方式是：三个选择框，每个选择框中的第一个选项是＆＃34; Select Something＆＃34;的效果。最初只应启用第一个选择框。一旦选择了某些东西（在这个例子中，我们唯一的选择是Sarah），那么第二个选择框应该由Sarah的孩子填充并且应该被启用。你可能会看到这是如何进行的。

回顾一下：

1. 根级别的选择框应预先填写并启用

2. 只有在＆＃34; parent＆＃34;中进行选择后，才应填写并启用根级别下的选择框。选择框

3. 这可能假设无限深

此时我或多或少接受了失败，在花了几个小时修补它之后，我无法绕过如何在AngularJS中做到这一点。我能够开始的只是根级别。所有其他行为对我来说都是一个完全的谜。我是否需要使用jQuery或类似的东西来填充框？如何在我的方法中访问数组来填充？ AngularJS是否提供了一系列功能，可以减轻我的痛苦？

我非常欣赏一些想法和/或正确方向的观点。

编辑：为了使这个更复杂（对我来说，无论如何）是＆＃34;类型＆＃34;很重要。换句话说，如果根级别上有＆gt; = 1个对象，与Sarah一起使用类型＆＃39; Cat＆＃39;那么所有的猫都需要进入单独的选择框。