Nested select menu in angular

How do we create or is it possible to create a nested select menu like the example select screenshot menu below but using my mat-select below , if user select an item from REPM mat select it will show on the right side the Master Broker Company menu. Thanks.

#example select

#html code

<div style="margin-top: 8px;margin-left:8px;">  
                                <mat-form-field appearance="fill" class="transaction-control-filter">
                                    <mat-label class="transaction-detail-header-label">REPM</mat-label>
                                    <mat-select #rempselect multiple (openedChange)="changeREMPFilter($event)">
                                        <div  class="select-all-property-transaction-list">
                                            <mat-checkbox color="primary" [(ngModel)]="allSelectedREMP" [ngModelOptions]="{standalone: true}"
                                                (change)="toggleAllSelectionREMP()">Select All</mat-checkbox>
                                        </div>
                                        <mat-option (click)="optionClickREMP()" *ngFor="let remp of repmList" [value]="remp.display">
                                            {{remp.display}}
                                        </mat-option>
                                    </mat-select> 
                                </mat-form-field>
                            </div>

                            <div style="margin-top: 8px;margin-left:8px;">  
                                <mat-form-field appearance="fill" class="transaction-control-filter">
                                    <mat-label class="transaction-detail-header-label">Master Broker Company</mat-label>
                                    <mat-select #companyselect multiple (openedChange)="changeCompanyFilter($event)">
                                        <div class="select-all-property-transaction-list">
                                            <mat-checkbox color="primary" [(ngModel)]="allSelectedMasterBrokerCompany" [ngModelOptions]="{standalone: true}"
                                                (change)="toggleAllSelectionCompany()">Select All</mat-checkbox>
                                        </div>
                                        <mat-option (click)="optionClickMasterBroker()" *ngFor="let masterbroker of transactionMasterBrokerCompany" [value]="masterbroker.display">
                                            {{masterbroker.display}}
                                        </mat-option>
                                    </mat-select> 
                                </mat-form-field>
                            </div>

#this is my existing mat select