Populating elements live when events happen not happening

I have the following template with two dropdowns. When an item is selected in the first dropdown it dynamically populates the second. It works, but not how I would expect. It takes a couple selections for the second select to populate.

<select class="select input input-bordered" (change)="onStudentChange($event)" >
<option disabled selected value="0">Choose Student</option>
<option *ngFor="let student of studentsByUser$ | async" value="{{student._id}}">{{ student.name }}</option>
</select>
<select *ngIf="selectedStudentId != ''" class="select input input-bordered" (change)="onMonthChange($event)" >
<option disabled selected>Choose Month</option>
<option *ngFor="let month of months" value="{{month}}">{{month}}</option>
</select>


Here is the event:

onStudentChange(event: any): void {
this.selectedStudentId = event.target.value;
// Get the available months with published meals for selected student
this.studentsByUser$.subscribe((students) => {
const selectedStudent = students.find((student) => student._id === this.selectedStudentId);
this.mealService.getMealsBySchool(selectedStudent?.school?._id!).subscribe((meals) => {
const months: string[] = [];
meals.map(meal => meal.date).map((dateString) => {
months.push(new Date(dateString).getFullYear() + '-' + new Date(dateString).getMonth());
})
this.months = months
});

});
}


this.months is getting the current values on debugging, but not reflected in the UI until the event is called again

Continue reading...