Angular service not updating component html element

I have a property in an object in an Angular service that is bound to a text field in a component’s html.

When the property is updated by the service, the new value is not showing in the html element until I click on the element.

I cannot figure out why the new value isn’t immediately showing in the text field without having to click on the element to get the new value.

The console.log message in the update function shows that the object is updated correctly, it’s just that the data is not making it through to the form field until the element is clicked.

The code is below:

parent.component.html

<input [(ngModel)]="service.selectedMarker.data" type="text" />

service.service.ts

public serviceObj = {} as any;

...

updateObj() {
    this.serviceObj.data = 'new value';
    console.log('this.serviceObj = ', this.serviceObj);
}

...