Javascript 使用AngularJS在第一个选择标记的基础上填充第二个选择标记？

我正在使用UI引导，所以我可以同时使用Angular和Bootstrap。我想访问“controllerCountries”控制器具有的select标记中的值，并将该值用作填充select“selectedServices”的参数。我想这样做，因为程序的逻辑是，当我在一个select标记中选择一个国家列表中的一个国家时，使用该值填充另一个select标记

我的HTML在这里：

<div  style="margin-top: 15px"  class="col-md-6">
     <div id="form-pais"class="form-group">
         <label class=" control-label">Country:</label>
         <div class="selectContainer">
              <select  ng-controller="controllerCountries" class="form-control" id="abvCountry" name="abvCountry" ng-model="countrySelected">
                   <option value="gt">Guatemala</option>
                   <option value="sl">El Salvador</option>
                    <option value="hn">Honduras</option>
               </select>
         </div>
     </div>
</div>
<div style="margin-top: 15px"  class="col-md-6">
   <div class="form-group">
       <label class=" control-label">Services:</label>
   <div ng-controller="controllerServices" class="selectContainer">
       <select  class="form-control" id="selectServices"ng-model="servicios" ng-options="y for (x, y) in serviciosgt" text="">
       </select>
   </div>

现在我可以访问第一个“controllerCountries”的值并将该值记录在控制台上，但仅此而已。正如您所看到的，我用第一个对象填充了select，但我希望它们是dinamic。谁能帮帮我吗。如果你发现我的代码错了，欢迎你来修复它

问候和感谢

---

首先，您不需要使用

$watch

，您可以在更改select值（ng模型）时使用它来触发回调。您可以在那里编写

if

语句

其次，不要在select上使用

ng controller

，您必须在

中动态放置嵌套的

元素

最后，如果要使用从select number 1中选择的值填充select number 2，只需在触发ngChange回调时引用正确的数据即可

$scope.onCountryChange = function (country) {
      if(country=="gt")
      {
           console.log("Select GT");
           $scope.serviciosgt = { ... };
      }
      else if(country=="sl")
      {
           console.log("Select SL");
           $scope.serviciosgt = { ... };
      }
      else if(country=="hn")
      {
           console.log("Select HN");
           $scope.serviciosgt = { ... };
      }
 };

您的选择可能看起来像这样

<select class="form-control" 
        name="abvCountry" 
        ng-change="onCountryChange(countrySelected)" 
        ng-options="country for country in countries" ng-model="countrySelected">
</select>

<select class="form-control" 
        name="abvCountry" 
        ng-change="onCountryChange(countrySelected)" 
        ng-options="country for country in countries" ng-model="countrySelected">
</select>

$scope.countries = ["gt", "sl", "hn"];