watching on the select item in Angularjs

Question

I am having a div which contains a set of dropdown to select a criteria. We can add or delete criteria using the plus and minus buttons. The values to fill in the dropdown is fetched from an API.

The code for the UI is below:

<form novalidate="" role="form" name="filterForm" class="form-inline">
  <div ng-repeat="criteria in criterias">
    <div class="m-b">
      <div class="form-group s-b" style="width: 150px;">
        <span>Country</span>
        <select class="form-control" ng-options="item for item in country" name="account" ng-model="criteria.country" style="max-width:100%"></select>
      </div>
      <div class="form-group s-b" style="width: 150px;">
        <span>State</span>
        <select ng-options="item for item in state" class="form-control" name="account" ng-model="criteria.state" style="max-width:100%"></select>
      </div>
      <div class="form-group s-b" style="width: 150px;">
        <span>City</span>
        <select class="form-control" ng-options="item for item in city" name="account" ng-model="criteria.city" style="max-width:100%;"></select>
      </div>
      <div class="form-group s-b" style="width: 150px;">
        <span>Predicate</span>
        <select class="form-control" name="account" ng-model="criteria.predicate" style="max-width:100%">
          <option value="matches">Matches</option>
          <option value="not-matches">Not Matches</option>
        </select>
      </div>
      <div class="form-group s-b" style="width: 100px;">
        <span>Value</span>
        <select class="form-control" ng-options="item for item in value" name="account" ng-model="criteria.value" style="max-width:100%;"></select>
      </div>
      <div class="form-group s-b" style="margin-top: 20px;">
        <span>
          <button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()">
            <i class="fa fa-plus"></i>
          </button>
          <button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)">
            <i class="fa fa-minus"></i>
          </button>
        </span>
      </div>
    </div>
  </div>
  <button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
                        <i class="fa fa-check"></i>
  </button>
  <button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
                        <i class="fa fa-reply"></i>
  </button>
</form>

I need to watch for the dropdown and handle the event for the corresponding criteria and update the other corresponding dropdown elements for that criteria. Please let me know how to handle the $watch element when there are many criterias when user has added using the plus button as I am not advanced programmer on AngularJs.

Updated Question

Based on the suggestion I have used the ng-change instead of $watch and I am now able to handle the event and also get the reference to the criteria object. After handling the event, I need to update the state value for the selected country. I have updated the Plnkr link with the code below but the state drop down is not getting updated even after updated the scope using $scope.criterias[index] = user;. Please let me know if I am missing something.

Updated code to handle the change event:

$scope.handleClassification = function(index){
        var user = $scope.criterias[index];
        user.config=["California"];
        $scope.criterias[index] = user;
        console.log(user);

    }

I am providing the updated plnkr link for more details - Plnkr

Answer 1

Try this way..I guess you want to update select in a cascade way...

Your HTML file:

  <div ng-controller="StaticCtrl">
      <h1>Static - Oriented</h1>
      <p>This approach may be better when you have the entire dataset</p>
    <div>
        Country: 
        <select id="country" ng-model="cities" ng-options="country for (country, cities) in countries" ng-change="onChange()">
          <option value=''>Select</option>
        </select>
    </div>
    <div>
        State: <select id="city" ng-disabled="!cities" ng-model="suburbs" ng-options="city for (city, suburbs) in cities"><option value=''>Select</option></select>
    </div>
    <div>
        City: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value=''>Select</option></select>        
    </div>
  </div>

and your JS:

    function StaticCtrl($scope) {
  $scope.countries = {
    'India': {
      'UP': ['Noida', 'Lucknow', 'Agra'],
      'Maharashtra': ['Mumbai']
    },
    'USA': {
      'San Francisco': ['SOMA', 'Richmond', 'Sunset'],
      'Los Angeles': ['Burbank', 'Hollywood']
    },
    'canada': {
      'People dont live here': ['igloo', 'cave']
    }
  };
  $scope.onChange = function() {
  console.log("Asdasd");
    $scope.suburb = '';
  }
}

Here is the fiddle..