Change checkbox status on div click

I have this div with a checkbox inside:

<div class="xo-list-group-item" style="padding-bottom: 0;">
      <input data-ng-if="selectable" type="checkbox" data-ng-model="$parent.selected">
</div>

I need it so that the checkbox works independently, but will also check/uncheck if I just click anywhere in the div itself. The biggest issue here is getting it to check/uncheck while still triggering the $parent.selected. In the past I have gotten it to where if I click the div it checks or unchecks, but doesn't update anything, so I scrapped that and figured I would ask. Any help would be appreciated!