How to prevent button click from collapsing pane
<p>I have a ui-bootstrap pane (header &amp; body) with a button on the header. Clicking the header area should collapse the body. Clicking the button should just activate an alert popup.  Unfortunately, clicking that button ALSO collapses the pane. I suspect that the pane behind the button is somehow capturing the click. How can I prevent this?</p>

<p>Here's the plunker: 
<a href="http://plnkr.co/edit/teCnC7KtvlQtosZurlqD?p=preview" rel="nofollow">http://plnkr.co/edit/teCnC7KtvlQtosZurlqD?p=preview</a></p>

<pre><code>&lt;div class="panel panel-primary"&gt;
&lt;div class="panel-heading" ng-click="vm.onClickHeader()"&gt;
    &lt;span ng-hide="vm.collapsed" style="padding-top: 8px"&gt;
        &lt;span ng-click="vm.onClickBtn()"&gt;&lt;i class="fa fa-chevron-left fa-2x"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/span&gt;
&lt;/div&gt;

&lt;div class="panel-body" ng-hide="vm.collapsed" style="padding: 2px; padding-right: 4px"&gt;
    &lt;div&gt;Click the button above to hide me!&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


var app = angular.module('app');

app.directive('myPanel', MyPanel);
function MyPanel() {
    return {
        templateUrl: 'my-panel.html',
        restrict: 'E',
        controller: MyController,
        controllerAs: 'vm',
        scope: true
    };
};


function MyController() {
    this.collapsed = false;

    this.onClickBtn = function onClickBtn() {
        alert('click!')
    };

    this.onClickHeader = function(evt) {
        this.collapsed = !this.collapsed;
    }

}
</code></pre>