title: How to prevent button click from collapsing pane
body: <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>