How to trigger ng-change on a select that contains a ng-repeat

Question

I have two select box, the second select box updates itself when the first select box changes.

<label>Region</label>
<select ng-model="region" 
        ng-change="clear(1)" 
        ng-options="l.region for l in locations"
></select>
<br />
<label>Country</label>
<select ng-model='country'
        ng-change="clear(2)" 
        ng-options="c.country for c in region.countries"
></select>

My locations is a json object that looks like this :

[
  {region: "Europe", countries: [{country: "France"}, {country: "UK"}/*, ...*/]},
  {region: "Africa", countries: [{country: "Cameroon"}, {country: "Algeria"}]}
  /*, ...*/
]

This all works fine this way.

It begins to be complicated when I want to set the value of the first select box to Europe, and I want to trigger the ng-change event on the second select box.

Any idea on how to do this?

Answer 1

You want to trigger the ng-change event on the second select box, which is equivalent to the scenario when the model region is changed. So you can use a watcher to achieve it.

$scope.$watch('region', function (newValue, oldValue) {
    console.log(newValue, oldValue);
})