uib-accordion with close button on heading

by ifonecoder

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="AccordionDemoCtrl">

    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group ng-repeat="group in names"><uib-accordion-heading>
        {{group}} <a ng-click="removeElement(group)" class="pull-right" stop-event='click' >&times;</a>
      </uib-accordion-heading>
      {{group}}</uib-accordion-group>
    </uib-accordion>
  </div>
</div>

JavaScript

var app = angular.module('myapp', ['ui.bootstrap', 'ngAnimate'])
app.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if(attr && attr.stopEvent)
                element.bind(attr.stopEvent, function (e) {
                    e.stopPropagation();
                });
        }
    };
 });
app.controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
  $scope.names = ['apple','banana','orange'];
  $scope.removeElement = function(item){
  	$scope.names.splice(item,1);
  }
});