双重选择angular-js ajax

Question

I'm trying to retrieve the first selected value and then run an ajax call to get the 2nd set of data based on the first selected selected value.

HTML:

<label class="item item-input item-select">
  <div class="input-label">
   Select First:
   </div>

   <select>
    <option  ng-repeat="object in objects" value="object.ID">{{object.value}}</option>
   </select>
</label>

<label class="item item-input item-select">
  <div class="input-label">
   Select 2nd:
  </div>

  <select>
  <option></option>
  </select>
</label>

Controller Side:

...
dataFactory.getRequestObject(ID).then(function(resp2){
      console.log("Getting data to populate select list!");
      console.log(resp2.data);
      $scope.objects= resp2.data;

    }, function(err){
        console.error('ERROR', err);
    });

Where getRequestObject(ID) is my function which calls my webservice.

I'm able to get my first set of data, I would like to get the "value" of the first and invoke the retrieving of the 2nd select list of data. How would I go around doing it?

Answer 1

$.getJson(url, param, function(data) {
  $scope.array1 = data.array;
});
$scope.onchange = function() {
  //ng-model will store its value into $scope
  var selectValue1 = $scope.selectValue1;
  
  $.getJson(url2, param2, function(data) {
    $scope.array2 = data.array;
  });
};

<select ng-module="selectValue1" ng-options="label for value in array1" ng-change="onchange()"></select>
<select ng-module="selectValue2" ng-options="label for value in array2"></select>

use $watch to detect selectValue change will also work

</div>