Q:

Make Angular UI accordion fully clickable instead of only Heading Label

I am using an Angular ui-bootstrap accordion. With my current code, I am not able to click and open the entire heading panel, only heading label(Title) is clickable and opening the accordion. Any help is appreciated. Thanks in advance ! Here is my HTML: 
 <uib-accordion close-others="oneAtATime">
    <div uib-accordion-group is-open="sv.isOpen" class="panel-default" id="{{ sv.domId }}" heading="{{(sv.type == 'Check Call') && sv.type || sv.type + ': '+ sv.city +', '+sv.state}}" 
    ng-repeat="sv in segment.stopVos" tab-group={{$index+1}}>
       <div class="app-wrapper content">

A:

Instead of...
<uib-accordion-heading>
    Click me
</uib-accordion-heading>

Setup you uib-accordion-heading to contain a full width element such as p, p will also provide some default margin so make sure to remove it (or tweak it enough) so it won't mess your style.
<uib-accordion-heading>
    <p style="margin-bottom: 0;"> Click me </p>
</uib-accordion-heading>

