Angular Formarray select drop-down issue

Check this stackblitz for working example.

<form [formGroup]="profileForm">

    <h1>Profile Form</h1>

    <div>
        <label for="first-name-input">First Name</label>
        <input type="text" id="first-name-input" formControlName="firstNameInput">
  </div>

  <div>
        <label for="last-name-input">Last Name</label>
        <input type="text" id="last-name-input" formControlName="lastNameInput">
  </div>

    <div formArrayName="optionGroups">

        <div *ngFor="let $optionGroup of profileForm.controls['optionGroups'].controls;  let $index=index">

            <h4>Option {{ $index + 1 }} </h4>

            <div [formGroupName]="$index"> 
                <label for="select-input">Criteria</label>

                <select id="{{ 'select-input' + $index }}" formControlName="selectInput">
          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects" [value]="select.name">{{select.id}}</option>
        </select>

                <label [for]="'where-input-' + $index">Option</label>
                <select [id]="'where-input-' + $index" formControlName="whereInput">
          <option value="0" disabled selected>Select a Option</option>
          <option *ngFor="let where of getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)" [value]="where.name">
            {{where.id}}
          </option>
        </select>

                <button type ="button" (click)="removeOptionGroup($index)">X</button>

            </div>

        </div>

    </div>

  <button type="button" (click)="addOptionGroup()">Add Options</button>

  <div>
        <button type="button" (click)="saveProfileForm()">Send</button>
  </div>

</form>

<pre>
{{ profileForm.value | json }}
</pre>

The important part is that once you select a "criteria" then the list of "Options" should be refreshed using this function:

  getWheresFor(inputStr: string): Where[] {
    return this.dropdownservice
      .getWhere()
      .filter(item => item.selectid === inputStr);
  }

called from your html like this:

getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)"

Also you can shorten the expression like this using the $optionGroup variable:

getWheresFor($optionGroup.controls['selectInput'].value)"

UPDATE

select [id]="'where-input-' + $index"

This will generate unique id's in the DOM for each select element. Typical use case is with label element which has a for attribute like this:

<label [for]="'select-input' + $index">Criteria</label>
<select id="{{ 'select-input' + $index }}" formControlName="selectInput">

This markup will generate dom elements like this:

The use of this is that now the user can click on the label's text and select element will get the focus.