Ionic model object not loading

Question

I am using Ionic 3, and have the following code:

settings.html

<ion-header>
  <ion-navbar hideBackButton='false' color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Settings</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div *ngIf="personModel">

    <ion-list>
      <ion-item>
        <ion-label>Notifications</ion-label>
        <ion-toggle [(ngModel)]="personModel.notifications" formControlName="notifications" id="notifications" ng-checked="true">Notifications</ion-toggle>
      </ion-item>
    </ion-list>

    <br>

    <ion-list radio-group [(ngModel)]="personModel.milesKm" formControlName="milesKm" id="milesKm">
      <ion-item>
        <ion-label>Km</ion-label>
        <ion-radio value="1"></ion-radio>
      </ion-item>
      <ion-item>
        <ion-label>Miles</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>
    </ion-list>

  </div>

  <div *ngIf="!personModel" style="text-align:center">
    Please Login to access settings
  </div>

</ion-content>

settings.ts

import { Component, Inject, forwardRef } from '@angular/core';
import { NavController, NavParams, Events, AlertController, IonicPage } from 'ionic-angular';
import { PersonModel } from '../model/personModel';
import { UtilityService } from '../utils/utilityService';

@IonicPage()
@Component({
  templateUrl: 'settings.html'
})
export class SettingsPage {

  public personModel: PersonModel = null;
  public utilityService: UtilityService = null;

  constructor( @Inject(forwardRef(() => UtilityService)) utilityService, public nav: NavController) {
    this.utilityService = utilityService;
    this.utilityService.getLoggedInPerson().then((data: string) => {
      this.personModel = JSON.parse(data);
    });
  }

}

When I access the page, the constructor does populate the personModel object. (I add a breakpoint and it does set the object).

So I would expect the page to display the 'Notification' and 'mileKm' list items. But instead it displays:

This means that at the time the dom loads, the personModel object has not loaded yet.

Question

How do I get the page to load with the personModel loaded?

Thanks