I am trying to set select value dynamically but the changes are not reflected even with using detect changes.

Component:

```
export class AppComponent implements OnInit {

  constructor(private cd: ChangeDetectorRef) {

  }
  genders=['male','female'];
  SignupForm:FormGroup;

  ngOnInit(){
    this.SignupForm = new FormGroup({
      'gender':new FormControl(),
    });
  }

  onSubmit(){
    console.log(this.SignupForm);
  }

  setGender() {
    this.SignupForm.controls.gender.setValue(this.genders[1]);
    console.log(this.SignupForm.controls.gender.value);
    this.cd.detectChanges();
  }
}

```

Template:

```
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
            <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
                <select fromControlName="gender">
         <option *ngFor="let g of genders">{{g}}</option>
       </select>

        <button class="btn btn-primary" type="submit">Submit</button> 
      </form>
    </div>
  </div>
</div>

<button class="btn btn-primary" (click)="setGender()">Set Female</button>

```

[Stackblitz](https://stackblitz.com/edit/angular-reactive-forms-ryypmv)