How to set option of one dropdownlist with the other

Question

I'm having a weird problem with my code. There's no error or warning. It is showing unexpected behavior. I have a widget in which there are two dropdown lists, one is primary and the other one I call secondary. The idea is to compare sales of this year, quarter or sprint with the previous year, quarter or sprint. That means year to be compared with year only, a quarter with a quarter only, and so on. Here's the screenshot:

See, If I choose an option from the primary dropdown, then the same should get selected in secondary also. However, the reverse is not true. They both are getting options from the same array. Except that Secondary options are prefixed with Previous keyword. It's my organization's code but I think it's ok to share with all here.

Assume:

1. dls-dropdown is select tag of HTML
2. dls-option is option tag of HTML
3. dls-label is p tag of HTML (not important, ignore this tag)

Here is my implementation:

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 {  
    }
}

I have thoroughly gone through various content:

1. (change) vs (ngModelChange) in angular
2. Tried using callback function also
3. Understanding Change Detection Strategy in Angular

I created an stackblitz and surprisingly exactly the same logic is working with basic select and options tags. But with my company's tags it is not working. However on console I'm getting correct output:

But on front-end, sometimes it updates and something it doesn't. There's nothing mentioned in the documentation of our company's component about this. Please help me. Is my company's design framework responsible for this?