Fire “data-ng-change” programatically or another way to change value of input on website using Angular JS

I am writing a userscript and unfortunately the website uses Angular JS which I don’t know.

There is code:

<form class="form ng-pristine ng-valid ng-valid-maxlength" name="$ctrl.actionableForm.form" _lpchecked="1">
<input type="text" maxlength="254" placeholder="" data-ng-attr-id="text-field-{{:: $ctrl.widget.header.id }}" data-ng-model="$ctrl.fieldValue.value" data-ng-change="$ctrl.updateFormFieldValue()" data-ng-blur="$ctrl.onBlur()" data-ng-focus="$ctrl.updateFormFieldValue()" data-ng-readonly="$ctrl.isReadOnly()" data-ng-trim="false" data-ng-keyup="$ctrl.handleKeyup($event)" class="form-control text-field-input ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-maxlength focus-visible" id="text-field-qYMHEJMncH0S-ogeOc5CTw" data-focus-visible-added="">

I want to change the value of that input programatically, like:

document.querySelector('[id^="text-field-"]').value = 'My new value';

But it doesn’t work because it doesn’t fire data-ng-change=”$ctrl.updateFormFieldValue()” so the new value is not saved.

Please how can I do it?

Answer

If someone will look for the same thing, I solved it this way:

const myField = document.querySelector('[id^="text-field-"]');
myField.value = 'My new value';
angular.element(myField).trigger('change');