ionic muiltiselect checkbox not working in my ionic application

I am trying to deselect all the checkboxes with the "deselect all" checkbox, but the method is not being called for the first time. It's working fine on the second click.

I expect all the checkboxes to be deselected on every click.

ionic mobile application

  <ion-col class="reason-top">
    <div class="">
      <ion-label ><b>  LblReason</b></ion-label>
      <ion-item class="form-line-active shift" no-lines>
      <ion-label>   LblMjReason </ion-label>
      <ion-select #myselect multiple="true" 
            class="selector" (click)="openSelect(myselect)" 
          [(ngModel)]="selectedReason">
        <!-- <ion-option value="Planned"> 
          LblPlanned</ion-option>
        <ion-option value="Electrical"> 
              LblElectrical</ion-option>
        <ion-option value="Mechanical"> 
           LblMechanical</ion-option>
        <ion-option value="Operator"> 
          LblOperator</ion-option>
        <ion-option value="Utility">{ 
        LblUtility</ion-option>
        <ion-option value="Roll Change"> 
              LblRollChange</ion-option>
        <ion-option value="Level2"> 
          LblLevel2</ion-option>
        <ion-option value="Level3"> 
           LblLevel3</ion-option>
        <ion-option value="Other"> 
     LblOther</ion-option> -->


         <ion-option (ionSelect)="allClicked(myselect)"  >All</ion-option>
         <ion-option *ngFor="let n of names" value=""></ion-option>

        <!-- <ion-option value="J" 
              [selected]="true">All</ion-option> -->
        </ion-select>
      </ion-item>
    </div>
  </ion-col>


  </ion-row>
  </table>
</ion-grid>