Angular2 looped checkboxes don´t work properly

I'm Looping above a list and for every entry I am creating a table row with several columns. In one column I show a Checkbox which is binded a variable:

Loop:

<tr *ngFor="let item of data">

            <td>
                <div>
                    <my-checkbox-input [var]="item" valuePath="hidden"></my-checkbox-input>
                </div>
            </td>

In the component.ts I am iterating an id for every instance, so the Checkbox has its own id in every row. HTML for Checkboxes:

<div class="checkbox checkbox-primary"
<input type="checkbox" [id]="'checkbox-'+id"> <label for="'checkbox-prime-'+id"></label></div>

Like I wrote it is already working. The Problem is, the Checkbox is only checking if you are clicking in the middle of the box. If you click on the borders, nothing happens.

If I am declaring the ids hardcoded the borders work, but if I click the border of a checkbox, every row updates the first row checkbox.

In the browser inspector every Checkbox has the right idea, so id=checkbox-0 up to checkbox-x.

Does anyone have an idea why this is happening?