Предварительно выбрать материализовать выбрать в угловых во время редактирования

Question

У меня есть материализованный выбор в моем угловом шаблоне HTML 8, как показано ниже.

<form class="col s12" [formGroup]="addDeviceForm" (ngSubmit)="addDevie()">
<div class="input-field col s6">
            <select id="modal-charge-controller" formControlName="chargeControllerModel">
              <option value="" disabled selected>Charge Controller Model</option>
              <option #chargeControllerRef [value]="model" *ngFor="let model of chargeControllerModels">
                {{ model }}
              </option>
            </select>           
          </div>
</form>

, поэтому после нажатия кнопки мне нужно будет извлечь некоторые данные и предварительно выбрать опцию из этого тега выбора.

   this.editDeviceForm = this.formBuilder.group({
          chargeControllerModel: [device.chargeControllerModel, Validators.required],
        });
const elem = document.querySelector(element);
    M.FormSelect.init(elem);

Выбор инициализируется без проблем, но с одним исключением.

Параметр, который необходимо выбрать после инициализации formbuilder, будет работать, только если я попытаюсь выбрать любой другой параметрв теге выбора.То есть, если я нажму на тег выбора, чтобы увидеть все остальные параметры, тогда будет выбран инициализированный параметр, но не с этим действием касания.

Я не знаю, что я делаю здесь неправильно, иЕсли кому-то нужна дополнительная информация, я с радостью помогу.

Заранее спасибо