javascript - Cómo establecer la opción de un menú desplegable con la del otro

Estoy teniendo un problema raro con mi código. No hay ningún error ni advertencia. Está mostrando un comportamiento inesperado. Tengo un widget en el que hay dos listas desplegables, una es primaria y la otra la llamo secundaria. La idea es comparar las ventas de este año, trimestre o sprint con el año, trimestre o sprint anterior. Eso significa que el año se debe comparar solo con el año, un trimestre solo con un trimestre, y así sucesivamente. Aquí está la captura de pantalla:

Mira, si elijo una opción del menú desplegable principal, entonces la misma debería seleccionarse también en el secundario. Sin embargo, lo contrario no es cierto. Ambos están obteniendo opciones del mismo arreglo. Excepto que las opciones secundarias tienen el prefijo Previous. Es el código de mi organización, pero creo que está bien compartirlo con todos aquí.

Asumir:

1. dls-dropdown es una etiqueta select de HTML
2. dls-option es una etiqueta option de HTML
3. dls-label es una etiqueta p de HTML (no es importante, ignora esta etiqueta)

Aquí está mi implementación:

timeselector.component.html

<dls-dropdown [(ngModel)]="primaryMode" (ngModelChange)="changeReferenceState($event)">
  <dls-option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation();">
    {{ mode }}
  </dls-option>
</dls-dropdown>

<dls-dropdown [(ngModel)]="secondaryMode" name="source">
  <dls-option *ngFor="let mode of modes" [value]="mode" (click)="$event.stopPropagation()">
    {{ mode }}
  </dls-option>
</dls-dropdown>

timeselector.component.ts

import { ... } from '@angular/core';
...

@Component({
    selector: 'app-timeselector',
    templateUrl: './timeselector.component.html'
})
export class TimeselectorComponent implements OnInit {

    modes = ['Year', 'Quarter', 'Sprint'];

    primaryMode;
    secondaryMode;

    constructor() {}


    changeReferenceState(e) {
        console.log("changed: " + e);
        this.secondaryMode=this.primaryMode;
        this.changeDetector.detectChanges();
        console.log("secondary: "+this.secondaryMode);
    }

    /* tried using call back also
      somethingChanged(e, callback){ 
        console.log("changed: " + e);
        this.secondaryMode=this.primaryMode;
        console.log("secondary: "+this.secondaryMode);
        callback(); 
        } 
    */    

    ngOnInit(): void {  
    }
}

He revisado a fondo varios contenidos:

1. (change) vs (ngModelChange) en Angular
2. También intenté usar la función de devolución de llamada
3. Comprendiendo la estrategia de detección de cambios en Angular

Creé un stackblitz y sorprendentemente exactamente la misma lógica funciona con etiquetas básicas select y options. Pero con las etiquetas de mi empresa no funciona. Sin embargo, en la consola estoy obteniendo el resultado correcto:

Pero en el front-end, a veces se actualiza y otras veces no. No hay nada mencionado en la documentación del componente de nuestra empresa sobre esto. Por favor, ayúdame. ¿Es el marco de diseño de mi empresa responsable de esto?