Angular 6 check box doesn't change state based on ngModel

In an array say I have five mantras out of it users have to choose maximum of three. This is my implementation

<input class='f-z-14' type="checkbox" [(ngModel)]='mantrasSelected[i]' [checked]='mantrasSelected[i] === true' (change)='mantraChecked(i, mantrasSelected[i], mantra)'>

And in my ts

mantraChecked(i, event, mantra) {
    if (event) {
      if (this.selectedCount < 3) {
        this.selectedCount += 1;
        this.mantrasSelected[i] = true;
      } else {
        this.mantrasSelected[i] = false;
      }
    } else {
      if (this.selectedCount > 0 && this.selectedCount <= 3) {
        this.selectedCount -= 1;
        this.mantrasSelected[i] = false;
      }
    }
}

So If i choose first three means in this.mantrasSelected I will be having [true, true, true, false, false]. So If user checked fourth one means I'm checking in my mantraChecked() if count is greater than 3 means I dont want to check it. after I click 4th mantra I'm changing mantrasSelected to [true, true, true, false, false] but view shows it is checked. How can show to the user that they have checked only three box? How two biding work with checkbox? Thank you.