title: Angular - Dependent Select Dropdown is not refreshing initial data on the list
body: <p>In Angular-12, I am implementing select dependent dropdown. I have two models:</p>
  <ul>
  <li>vehicle_models</li>
  <li>vehicle_makes</li>
  </ul>
  <p>One vehicle make have many models:</p>
  <p>Then this api JSON response:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "message": "Vehicle Make Successfully Retrieved.",
    "error": false,
    "code": 200,
    "results": {
      "vehiclemakes": [{
          "id": 1,
          "name": "Acura",
          "code": "ACURA",
        },
        {
          "id": 2,
          "name": "BMW",
        },
        {
          "id": 3,
          "name": "Renault",
        },
        {
          "id": 4,
          "name": "Toyota",
        },
        {
          "id": 5,
          "name": "Volvo",
        },
        {
          "id": 6,
          "name": "Volkswagen",
        }
      ]
    }
  }
  
  
  {
    "message": "Vehicle Model Successfully Retrieved.",
    "error": false,
    "code": 200,
    "results": {
      "vehiclemodels": [{
          "id": 1,
          "name": "- 2.2CL",
          "make_id": 1,
          "vehiclemake": {
            "id": 1,
            "name": "Acura",
          }
        },
        {
          "id": 2,
          "name": "100",
          "make_id": 6,
          "vehiclemake": {
            "id": 6,
            "name": "v",
          }
        }
      ]
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>service:</p>
  <pre><code>   public getAllVehicleModels(): Observable&lt;any&gt; {
      return this.http.get(this.api.baseURL + 'vehiclemodels/list', this.httpOptions);
    }
  </code></pre>
  <p>Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>vehicletypes!: any[];
  vehiclemakes!: any[];
  vehiclemodels!: any[];
  make_id!: '';
  model_id!: '';
  
  ngOnInit(): void {
    this.loadAllParameters();
    this.loadVehicleMakeData(event);
    this.loadVehicleModelData(event);
    this.createVehicle();
  }
  
  createVehicle() {
    this.createForm = this.fb.group({
      vehicle_make_id: ['', [Validators.required]],
      vehicle_model_id: ['', [Validators.required]]
    });
  }
  
  loadAllParameters() {
    this.vehicleService.getVehicleParameters().subscribe(
      data =&gt; {
        this.vehiclemakes = data.results.vehiclemakes;
        this.vehiclemodels = data.results.vehiclemodels;
      },
      error =&gt; {
        this.store.dispatch(loadErrorMessagesSuccess(error));
      }
    );
  }
  
  loadVehicleMakeData(event: any) {
    if (event) {
      this.make_id = event.id;
    } else {
      this.make_id = '';
    }
    this.vehicleModelService.getVehicleModelsByMake(this.make_id).subscribe(
      (data) =&gt; {
        this.vehiclemodels = data.results.vehiclemodels;
      }
    );
  }
  loadVehicleModelData(event: any) {
    if (event) {
      this.model_id = event.id;
    } else {
      this.model_id = '';
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-lg-4"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="vehicle_make_id"&gt;Vehicle Make:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;ng-select [items]="vehiclemakes" (change)="loadVehicleMakeData($event)" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select Vehicle Make" [multiple]="false" [clearable]="true" required formControlName="vehicle_make_id"&gt;
      &lt;/ng-select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-lg-4"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="vehicle_model_id"&gt;Vehicle Model:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
      &lt;ng-select [items]="vehiclemodels" (change)="loadVehicleModelData($event)" [selectOnTab]="true" [searchable]="true" bindValue="id" bindLabel="name" placeholder="Select Vehicle Model" [multiple]="false" [clearable]="true" required formControlName="vehicle_model_id"&gt;
      &lt;/ng-select&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/cqSWW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cqSWW.png" alt="dependent dropdown" /></a></p>
  <p>I expect that when user selects Vehicle Make, it should load the corresponding Vehicle Model. This is working.</p>
  <p>Where I have issue is that when the user selects any the loaded Vehicle Model, then goes back to Vehicle Make to select another Make. At this point the initial Vehicle Model onChange still remains, it's not cleared.</p>
  <p>How do I make Vehicle Make onChange to first clear everything in Vehicle Model before it populates it with fresh data?</p>
  <p>Thanks</p>