text in dropdown should be different than value

I have a dropdown in my template which is in Angular using the clarity framework. The value needs to be the agencyId, as only this is part of my object. But I want the text displayed to be the agencyName. I've tried many ways to do this, but no luck so far. Here is my latest attempt:

ts file

  agencyName = 'Anchor Health';

  caregivers$: Observable<Caregiver[]> = combineLatest([this.pagination$, this.filters$]).pipe(
    switchMap(([pagination, filters]) => {
      return this.afs
        .collection<Caregiver>('caregivers', (ref) => {
          let query: any = ref;

          if(filters) {
          for (const filter of filters) {
            if (filter.property === "onboardingCompleted") {
              const value = JSON.parse(filter.value);
              query = query.where(filter.property, "==", value)
            }
            if (filter.property === 'agency.agencyId') {
              query = query.where(filter.property, 'in', filter.value)
            }

            if (this.nameFilter.value == ['ezuziPPpKjiSfMOK9WbG']) {
              this.agencyName = 'Anchor Health';
            } else if (this.nameFilter.value == ['Vbi85JWcJnVzGb5Icx08']) {
              this.agencyName = 'Harbor Care';
            }


            console.log(this.nameFilter.value);
            console.log(this.agencyName);
          }
        }

          if (pagination.after) {
            query = query
              .orderBy('firstName', 'asc')
              .orderBy('caregiverId')
              .startAfter(
                pagination.after.firstName,
                pagination.after.caregiverId
              )
              .limit(pagination.limit);
          } else if (pagination.before) {
            query = query
              .orderBy('firstName', 'asc')
              .orderBy('caregiverId')
              .endBefore(
                pagination.before.firstName,
                pagination.before.caregiverId
              )
              .limitToLast(pagination.limit);
          } else {
            query = query.orderBy('firstName', 'asc').limit(pagination.limit);
          }
          return query;
        })
        .valueChanges()
        .pipe(
          tap(console.log),
          tap((caregiversArray) => {
            const caregivers = caregiversArray;
            this.updateState({ ...STATE, caregivers });
          })
        );
    })
  );

here is my template

 <ng-container *clrDgHideableColumn="{hidden: false}">
        Agency
        <clr-dg-filter [clrDgFilter]="nameFilter">
          <clr-checkbox-wrapper *ngFor="let agencyId of nameFilterValues; index as i" (change)="updateNameFilter($event)">
            <input type="checkbox" name = "name" clrCheckbox required [value]="agencyId"  [checked]="nameFilter?.value?.includes(agencyId)" />
            <label> </label>
<!--            <div *ngFor="let name of name">-->
<!--            <div></div></div>-->
          </clr-checkbox-wrapper>
        </clr-dg-filter>
      </ng-container>

the agencyName remains 'Anchor Health'. I want it to change, according to what is selected in the dropdown.