ionic-framework - Checkbox inside ion-slides with loop enabled

Question

I have a page which contains ion-slides with loop enabled. Each slide is generated with *ngFor and each one contains a checkbox. The problem I am facing is that the checkbox is not getting checked on first and last slides. I have found that its because there are duplicate slides for the first slide and last slide so clicking on the checkbox is not triggering it since there are duplicates for the same. I have tried giving Id to checkbox to make it unique but since the slides are generated dynamically whatever change I give is also getting replicated. Is there any workaround for this? Any help is much appreciated. Thank you

Here is my code

HTML part

<ion-slides pager='true' loop="true">
    <ion-slide *ngFor="let slide of demoData">
        <ion-card>
            <ion-card-header>{{slide}}</ion-card-header>
            <ion-card-content>
                <ion-checkbox></ion-checkbox>
            </ion-card-content>
        </ion-card>
    </ion-slide>
</ion-slides>

Ts Part

demoData = ['1', '2', '3'];