change text dynamically based on checkbox value

using FormArray I had bind checkbox on my component, default label of checkbox is select, when I clicked checbox, label will change to selected for each of checkbox (supposed to be), I also got selectAll button which change value of all checkbox to true and change text to selected, my problem is :

• when I select only one checkbox, change label will also effected other checkbox
• when I had selectAll checkbox, all checkbox label will change to selected,then if I unselected individual checkbox, it supposed to be change label to select

this is what I had tried:

html file

<div *ngIf="isShowResponse">
    <p>Inquiry Response</p>
    <form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
        <ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
            <ng-container [formGroupName]="i">
                <input type="checkbox" formControlName="isChecked"
        (change)="checkedState(summon)">
            
           </ng-container>
       </ng-container>
   </form>
<!-- <pre></pre> -->
<button (click)="selectAll()">Select All</button>
</div>

ts file

    checkedState(summon) {
    summon.checked = !summon.checked;
    this.summonText = summon.checked === true ? 'selected' : 'select';
  }

  selectAll() {
    this.formReceivedSummons.controls.map(value => value.get('isChecked').setValue(true));
    return this.summonText = 'selected';
  }

and this is my full stackblitz demo, i could use some suggestion and better practice to solve this problem