Prevent default anchor behavior if checkbox is checked

I am using Angular ui-bootstrap for accordion and for the panel header I also need a checkbox which is created inside an anchor tag using ui-bootstrap. It looks like this (the checkbox is inside <label>

) for styling):

<a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
   <span>Some headline</span>
   <label class="checkbox-toggle-btn">
      <span>Activate</span>
      <input data-ng-model="selected[service.name]" type="checkbox" ng-checked="selected[service.name]">
      <i></i>
   </label>
</a>

      

        
        
        
      

    

Clicking on the checkbox ( <label>

) will not show it as a checkbox, but <a>

will be clicked and the accordion will be expanded.

How can I prevent the Default tag from behaving <a>

when I click inside <label>

? Can I use a directive above the label and access the parent element?