Prevent default anchor behaviour if checkbox inside clicked

Question

I'm using Angular ui-bootstrap for accordion and for panel-heading I also need checkbox, which is generated inside anchor tag by ui-bootstrap. It looks like this (checkbox is inside <label> 'cause of 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>

By clicking on checkbox (<label>) it doesn't behave as checkbox but <a> is clicked and accordion expanded.

How can I preventDefault <a> tag behaviour if is clicked inside <label>? Can I use directive on label and access the parent element?

Answer 1

Try following

<label ng-click="$event.stopPropagation();"></label>