Checkbox next to collapsable details summary in ng-repeat

I want to place a checkbox next to the expandable summary of a details element which is inside a ng-repeat.

It all looks fine initially, but when I click on the expand arrow, the checkbox gets places inside the summary instead of next to the arrow. The checkbox must be inside the ng-repeat because I need the $index in my checkbox ng-click function:

<div ng-repeat="n in ctrl.array track by $index">
        <input type="checkbox" style="display: inline-block"
               ng-model="ctrl.checked[$index]" ng-click="ctrl.setSelected($index)">
        <details style="display: inline-block">
            <summary>Display something (element )</summary>
            <iframe></iframe>
        </details>
    </div>