AngularJS template not updating until browser interaction

Question

I'm having hard time figuring this one out so I'll try to explain it as best as I can.

I have a service like so

export class Users {
    constructor(private Api) {}

    public async getUsers() {
        return this.Api.get('/users');
    }
}

In my component I'm using it like this

export const myComponent = {
    template: '<pre>{{$ctrl.users|json}}</pre>',
    controller: class MyComponent implements IController {
        public users: any[] = [];

        constructor(private Users) {}

        public $onInit() {
            this.fetchUsers();
        }

        public async fetchUsers() {
            this.users = await this.Users.getUsers();
            console.log(this.users);
        }
    }
}

I can see the console.log working just fine but the template does not update until I interact with the browser somehow e.g. click something or press a key. What is going on? What am I doing wrong?