Creating a simple back-office plugin that has a button on it, and calls an API. For now, I'm just having the API return the current date and I'm attempting to display said date in a variable.

The problem is, when I click the button, nothing seemingly happens, though the console log does show a value coming back from the fetch. However, when I click the button again (or anywhere else on the open area of the screen) the front-end updates with the same value that was in the console.log.

I've also noticed that when I simply mouseover the left-menu pane, the UI also updates as intended. Is there something I'm missing that I need for the UI to update after a fetch call like this?

Here's a video showing the issue: https://www.loom.com/share/992a50b0a24d40d4983e7541b95d6a76

Here's the code:

Controller

angular.module("umbraco").controller("ImportContentController", function ($scope) {
    var vm = this;
    $scope.Message1 = "";
    $scope.Message2 = "";

    $scope.testMe = function () {
        (async () => {
            const response = await fetch('/umbraco/backoffice/plugins/welcomedashboard/process');
            let responseText = await response.text();
            $scope.Message1 = responseText;
            console.log(responseText);
        })();

        $scope.Message2 = new Date();
    }
    });

HTML View

<div class="import-content">
    <h1>Content Importer</h1>  

    <hr />

    <div class="import-content" ng-controller="ImportContentController as vm">
        <button ng-click="testMe()" class="btn btn-primary">Test</button>
        <div>Message1: {{Message1}}</div>
        <div>Message2: {{Message2}}</div>
    </div>

</div>