Does not update ngModel associated with the check box

<label class="checkiconImg bg-white">
    <input type="checkbox"
           [(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
            />
    <span class="geekmark ShowInComparisonToolCheckBox"
          pTooltip="Please deselect this before you select other."
          tooltipEvent="hover"
          (click)="checkRemark(coverIndex, roundIndex)"
          [tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>

This check box selects if the remarks given in the input (that is not given here) to be shown in a separate comparision tool. But before doing that we want to check if there is any other rounds that has a checked review, we want the user to uncheck that and check the current one that they wishes to show. But the problem is !hasComparisonToolSet comes true, kit does not update the isShowInComparisonTool to true that check the checkbox and geemark would be green.

checkRemark(quoteSupplierIndex, roundIndex) {
    if (this.negotiationRounds[roundIndex] && this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex]) {
        try {
            this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex].isShowInComparisonTool = false;
        } finally {
            // Check other rounds for any that have the comparison tool set
            const hasComparisonToolSet = this.negotiationRounds
                .filter((_, idx) => idx !== roundIndex)
                .some(round => {
                    const isShowInComparisonTool = round[1].quoteCoverageAssessments[quoteSupplierIndex]?.isShowInComparisonTool === true;
                    if (isShowInComparisonTool) {
                        round[1].quoteCoverageAssessments[quoteSupplierIndex].showWarningToolTip = true;
                    }
                    return isShowInComparisonTool;
                });
            if (!hasComparisonToolSet) {
                // Reset values if no other round has it set
                console.log("No other rounds with comparison tool set, resetting values.");
                const assessment = this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex];
                assessment.isShowInComparisonTool = true;
                assessment.showWarningToolTip = false;

                if (assessment.remarks !== null && assessment.isShowInComparisonTool === true && assessment.remarksType === 0) {
                    this.showRemark = true;
                }
            } 
        }       
    }        
}

I even tried to have (ngModelChange)="checkRemark(coverIndex, roundIndex)" in the checck box itself that would be something like this

<label class="checkiconImg bg-white">
    <input type="checkbox"
           [(ngModel)]="quoteSupplierCover.isShowInComparisonTool"
           (ngModelChange)="checkRemark(coverIndex, roundIndex)" />
    <span class="geekmark ShowInComparisonToolCheckBox"
           pTooltip="Please deselect this before you select other."
           tooltipEvent="hover"
           [tooltipDisabled]="!quoteSupplierCover.showWarningToolTip"></span>
</label>

But here even though the model was updated, the checkbox was always checked, even thogh for that particular quoteSupplierCover.isShowInComparisonTool was false.

Solution

What I understand from your question is somehow template is not detecting changes or it maybe that you are not changing the correct index.

You can try these:

check if you are changing the correct index of the array if yes then :
try reassigning the same variable which generally triggers the change detection mechanism like this:

this.negotiationRounds[roundIndex][1].quoteCoverageAssessments[quoteSupplierIndex] = {...assesment}

or you can manually trigger the change detection mechanism by importing the changeDetectorRef and triggering the detectChanges method:

this.changeDetectorRef.detectChanges();