Angularjs 多个绑定下拉列表

我在项目中遇到了一个问题。 我必须使用多个绑定下拉列表，其中一个下拉列表取决于以前选择的项目。 例如，我有一个有国家、地区和城市的类Person，这三个都是从下拉列表中选择的。 地区下拉列表取决于国家/地区下拉列表的选定项，即地区下拉列表必须包含属于选定国家/地区的地区列表；“城市”下拉列表在用户选择区域后加载，并且仅包含属于所选区域的城市

我试着像这里显示的那样做，但没有成功。在我“过滤”依赖下拉列表的源并将其传递到作用域之后，它不会重新加载，并且依赖下拉列表的选项保持不变

然后，我尝试在控制器中手动填充下拉列表选项，然后将其加载到下拉列表中

<div data-ng-controller="spLocationControllers">
    <select ui-select2 ng-model="person.country_id" id="cbCountry" data-ng-change="updateCountry()">
    <option data-ng-repeat="item in spCountryList" value="{{item.id}}">{{item.name}}</option>
    </select>
</div>

<div data-ng-controller="spLocationControllers">
  <select data-ng-model="person.region_id" id="cbRegion" data-ng-change="updateRegion()"></select>
</div>


<div data-ng-controller="spLocationControllers">
   <select data-ng-model="person.district_id" id="cbCity"></select>
</div>

{{item.name}

var listCountry=[{id:1，名称：“Country-1”}，
{id:2，名称：“国家2”}，
{id:3，名称：“国家3”}]；
var listRegion=[{id:1，name:“Region-1.1”，countryId:1}，
{id:2，名称：“地区-1.2”，国家id:1}，
{id:3，名称：“区域-2.1”，国家id:2}，
{id:4，名称：“地区-2.2”，国家id:2}，
{id:5，名称：“地区-3.1”，国家id:3}，
{id:6，名称：“区域-3.2”，国家id:4}]；
var listCity=[{id:1，name:“City-1.1”，RegionId:1}，
{id:2，名称：“城市-1.2”，区域id:2}，
{id:3，名称：“城市-2.1”，区域id:3}，
{id:4，名称：“城市-2.2”，区域id:4}，
{id:5，名称：“城市-3.1”，区域id:5}，
{id:6，名称：“城市-3.1”，区域id:6}]；
函数SplocationController（$scope）
{
$scope.updateCountry=函数（）
{
var strOption=''；
var cbv=$（“#cbCountry选项：选中”）.val（）；
/*对数据做一些处理，然后进入所选国家的地区列表
例如，如果在cbCounty中用户选择“Country-2”，则选择如下：
'  
区域-2.1
区域-2.2'
*/
$（“#cbRegion”）
.find（'选项'）
.删除（）
(完)
.append（strOption）
;
}
$scope.updateRegion=函数（）
{
var strOption=''；
var cbv=$（“#cbRegion option:selected”）.val（）；
/*形成相应的城市列表并将此列表设置为strOptions*/
$（“#cbCity”）
.find（'选项'）
.删除（）
(完)
.append（strOption）
;
}
}

---

它工作得很好，但当我打开已在cbCountry、cbRegion和cbCity中具有价值的班级人员编辑表单时，它没有显示cbRegion和cbCity的价值。请帮我解决这个问题。或者告诉我执行整个任务的其他方法

你的提琴对我很有用。如果你在一个角度应用程序中使用jQuery从dom获取/设置值，“你已经死了，但你还不知道”。请提供你的非工作小提琴灵感来源于你正在链接的小提琴，这将更容易发现问题，这可能是一个小问题，小提琴是一个好方法。这不是我的小提琴。我是在为我的问题寻找解决方案时发现的，从。当我在我的项目中实现该方法时，它不起作用。是否有其他方法可以进行此类下拉列表？

var listCountry = [{id: 1, name: "Country - 1"}, 
                 {id: 2, name: "Country - 2"},
                 {id: 3, name: "Country - 3"}];

var listRegion = [{id: 1, name: "Region - 1.1", countryId: 1},
                {id: 2, name: "Region - 1.2", countryId: 1},
                {id: 3, name: "Region - 2.1", countryId: 2},
                {id: 4, name: "Region - 2.2", countryId: 2},
                {id: 5, name: "Region - 3.1", countryId: 3},
                {id: 6, name: "Region - 3.2", countryId: 4}];

var listCity = [{id: 1, name: "City - 1.1", RegionId: 1},
                {id: 2, name: "City - 1.2", RegionId: 2},
                {id: 3, name: "City - 2.1", RegionId: 3},
                {id: 4, name: "City - 2.2", RegionId: 4},
                {id: 5, name: "City - 3.1", RegionId: 5},
                {id: 6, name: "City - 3.1", RegionId: 6}];


function spLocationControllers($scope)
{
    $scope.updateCountry = function()
    {
       var strOption = '<option value=-1> </option>';
       var cbv = $("#cbCountry option:selected").val();
       /*doing something with data and get to strOptions the list of regions that belong to selected country
   for example, if in cbCounty user selects "Country - 2" then strOptions would be something like this:
   '<option value=-1> </option> 
    <option value=3> Region - 2.1 </option>
    <option value=4> Region - 2.2 </option>'
   */

     $('#cbRegion')
            .find('option')
            .remove()
            .end()
            .append(strOption)
        ;
}
$scope.updateRegion = function()
{
   var strOption = '<option value=-1> </option>';
   var cbv = $("#cbRegion option:selected").val();
   /* forming corresponding list of cities and setting this list to strOptions  */

     $('#cbCity')
            .find('option')
            .remove()
            .end()
            .append(strOption)
        ;
    }
}