Angular Cascade下拉列表

Question

我正在尝试创建一个级联的下拉列表，并且可以使用。

js：

$scope.cluster= {
  '10 - Network Security': {
    'Business Network Protect': [],
    'Customized Network Protect': [],
    'Network Security Solution': [],
    'APT Protect Pro': [],
    'E-Mail Protect Pro': [],
    'E-Mail Encryption Gateway': [],
    'Internet Protect Pro': [],
    'Security Suite - TrendMicro (OE)': [],
    'Mgd. Hosted Security - Cisco ASA (OE)': [],
    'Network Access Control (OE)': [],
    'L2 Encryption (OE)': [],
    'Telesec BOS MKK (OE)': [],
    'Network Security Sonstige (OE)': [],
  },
  '11 - Identity and Access Management': {
    'Priviliged Identity Protect Pro': [],
    'Business Identity Protect': [],
    'Telesec Onetimepass': [],
    'Smart Cards': [],
    'TCOS Secure Elements': [],
    'Shared Business CA': [],
    'Indivdual PKI Solutions': [],
    'IOT CA': [],
    'Server Pass': [],
    'Public Key Services': [],
    'Trusted IT-Operations': [],
    'Energy CA': [],
    'Identity & Access Management Sonstige (OE)': [],
  }
};

html：

<div ng-controller="ClusterController">
  <div class="control-group">
    <label for="cluster">Cluster *</label>
    <div class="controls">
      <select id="cluster" ng-model="clusters" required 
      ng-options="cluster for (cluster, tsecprodukts) in cluster"
      ng-change="GetSelectedCluster()" cam-variable-name="cluster"
      cam-variable-type="String">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="control-group">
    <label for="tsecprodukt">TSec Produkt *</label>
    <div class="controls">
      <select id="tsecprodukt" ng-disabled="!clusters" required
      ng-change="GetSelectedProdukt()" ng-model="tsecprodukt"
      ng-options="tsecprodukt for (tsecprodukt,pp) in clusters"
      cam-variable-name="tsecprodukt" cam-variable-type="String">
        <option value=""></option>
      </select>
    </div>
  </div>
</div>

之后，我将选择并保存变量。但是，当我更新此页面时：第一个元素具有正常显示，但是第二个对象显示为第一个对象的元素数组。