I have solved the issue. Working code is here.

https://stackblitz.com/edit/personselectorv2?file=src/app/app.component.ts

If I Understand the problem properly. in LoadPersonList function this.SelectedPerson = this.lstPerson[0]; will not execute. remove the else block that wrapped this piece of function may solve your problem.

I have a sample Angular page that is not setting my bound SelectedPerson variable on the startup.

The page load, loads a drop down and selects the 3rd item (X3) correctly, but the bound var {SelectedPerson} is not getting set. It works when I manually select an item.

Here is my code. You can run the test at..
https://stackblitz.com/edit/personselector1?file=src/app/app.component.ts

HTML

<div>
    <select class="form-control" name="PersonSelector" (ngModelChange)="onPersonChange($event)"
        [(ngModel)]="SelectedPerson" [compareWith]="byPersonId">
        <option *ngFor="let r of lstPerson" [ngValue]="r">{{r.PersonNumber}} - {{r.PersonName}}</option>
    </select>

  <br><br>

  <label>Person ID: {{SelectedPerson.PersonNumber}}</label><br>
  <label>Person Number: {{SelectedPerson.PersonNumber}}</label><br>
  <label>Person Name: {{SelectedPerson.PersonNumber}}</label><br>

  <br>

    <button  (click)="GetSelected()">Get Selected</button>  
   <label>  Person Name: {{mySelectedMessage}}</label><br>

</div>  

TYPESCRIPT

import { Component, VERSION } from '@angular/core';
import { PersonInfo } from './PersonInfo';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  
{
  //
  //    Globals
  //  
  mySelectedMessage: any = 'Nothing'

  lstPerson: any = [];

  SelectedPerson: PersonInfo = 
  {
    PersonID: null,
    PersonNumber: null,
    PersonName: null
  } 

  //
  //    Init
  //
  ngOnInit() 
  {
    this.LoadPersonList();
  } 

  //
  //    Display Selected Person
  //
  GetSelected()
  {
    this.mySelectedMessage = this.SelectedPerson.PersonName;
    console.log('SelectedPerson', this.SelectedPerson)
  }
    
  //
  //    Load Dropdown
  //
  LoadPersonList() 
  {
    var temp = [
        { PersonID: 1, PersonNumber: 'X1', PersonName: 'Dave Smith' },
        { PersonID: 2, PersonNumber: 'X2', PersonName: 'Tammy Spoon' },
        { PersonID: 3, PersonNumber: 'X3', PersonName: 'Rosy Cheeks' },
        { PersonID: 4, PersonNumber: 'X4', PersonName: 'Don Key' },
    ];    

    this.lstPerson = temp;

    if (this.lstPerson.length > 1) 
    {
      this.lstPerson.unshift(
      {
        PersonID: 0,
        PersonNumber: "- Select a Person",
        PersonName: ""
      })
      } 
      else 
      {
      this.SelectedPerson = this.lstPerson[0];
      }         

  }

  //
  //    byPersonId - For [compareWith] in .html
  //
  byPersonId(item1: any, item2: any) 
  {
    return item1.PersonID === 3;
  }

  //
  //    onPersonChange - Person Selector Change
  //
    onPersonChange(value) 
    {
    //this.mySelectedMessage = value.PersonName;
    console.log("Person Change: ", value);
    }  
}

PersonInfo

export interface PersonInfo
{
    PersonID: number,
    PersonNumber: string,
    PersonName: string
}