Checkbox inside ngx bootstrap accordion header not working properly

I have a checkbox inside the accordian header like below

    <accordion-group class="container-fluid"
      *ngFor="let header of data.premiseMeters; let i = index" (isOpenChange)="fetchMeterHistory($event)">
      <div class="row" accordion-heading>
          <input type="checkbox" [(ngModel)]="header.isChecked" class="form-check-input" (click)="checkboxClick()" > 
          <label class="form-check-label" for="check"></label>
        <span class="w20">MP Number: </span>
        <span class="w20"> ID: </span>
      </div>
      <div class="accordian-inner-content">
        <table class="table">
          <thead>
            <tr class="meter-reading-header">
              <th scope="col">Date</th>
              <th scope="col">reading</th>
              <th scope="col">type</th>
              <th scope="col">usage</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of readingHistory" class="meter-reading-content">
              <td> </td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </accordion-group>
  </accordion>

Below is the function i am calling while clicking in the checkbox which will prevent the propagation from the checkbox.

    checkboxClick(header, $event){
        console.log('Checked state: ' + header.checked);
        $event.stopPropagation();
      }

Unfortunately when i click on the checkbox it is not changing the value. 
header.checked is having a boolean value which i am getting from a service call response. I am not quite understanding what am i doing wrong here. 
Any help would be really appreciated.

Thanks in advance.