Angular - trouble with properties updating onchange from checkbox

I am attempting to use a checkbox in Angular in order to toggle the contents of an array. I am using property booleans to determine if 3 different boxes are checked and adjust the contents of the array accordingly. The array defaults to containing all 3 subarrays via declaring this.allNouns in ngOnInit(). When I click the first checkbox, I can see in the console that it is running the associated onchange function and setting the associated boolean to its opposite, but the interpolated string in the view does not change. When I click it again, it will change the view but now everything is one step behind. Also when it hits the console logs, it appears to load the prior length and not the length of the newly established this.allNouns. Below are the html and ts snippets associated with it. This is the first of the three checkboxes, but I plan to apply it to all when smoothed out.

TS

preloadedNouns: Boolean = true;

toggleData() {
  if(this.preloadedNouns==false){
    this.allNouns=this.nouns.concat(this.onlyUserNouns);
    console.log('hitting first condition in toggledata', this.allNouns.length);
  }
  else {
    this.allNouns=this.nouns.concat(this.stockNouns).concat(this.onlyUserNouns);
    console.log('hitting second condition in toggledata', this.allNouns.length);
  }
  }

HTML

<div name="allNouns" [(ngModel)]="allNouns" [ngModelOptions]="{standalone: true}" ngDefaultControl></div>

<div class="toggleDiv">
      <label>Preloaded Nouns</label>
      <input id="preloadedNounsCheck" 
      type="checkbox" 
      [checked]="preloadedNouns"
      (change)="toggleData(); preloadedNouns = !preloadedNouns">
    </div>