Невозможно использовать jQuery для выбора значения Angular Dropdown

У меня есть этот угловой компонент на странице, в котором привязаны все параметры.

Используя jQuery, я смог получить правильное выбранное значение следующим образом:

 $('#mat-select').val(); // returns me the id of the selected option

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

например.

 $('#mat-select').val(); // eg. returns 'mat-select-option-0'
 $('#mat-select').val('mat-select-option-5').trigger('input').trigger('change');
 $('#mat-select').val(); // returns me 'mat-select-option-5'

Тем не менее, выбранное значение для компонента по-прежнему похоже на mat-select-option-0. Я предполагаю, что я просто устанавливаю атрибут dom value и не обновляю угловой компонент, но не могу понять, как это сделать.

Может кто-нибудь посоветовать?