Angular UI accordion with buttons in the header part - angular-ui-bootstrap

Question

I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have two buttons in the header part.
Add - Create exactly same accordion below the original.
Remove - Remove the accordion. (the first accordion can not be removed -
disable the Remove button).
I am new to AngularJS and please help me to achieve this.

Answer 1

See a working plunker.
You just need a add and remove function in your controller
$scope.addGroup = function(idx, group, e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
var newGroup = angular.copy(group);
newGroup.no = $scope.groups.length + 1;
$scope.groups.splice(idx + 1, 0, newGroup);
};
$scope.removeGroup = function(idx, e) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
$scope.groups.splice(idx, 1);
};
and a ng-repeat for your html:
<accordion close-others="oneAtATime">
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
<accordion-heading>
{{ group.title }} ({{group.no}})
<button class="btn btn-small" ng-click="addGroup($index, group, $event)">+</button>
<button class="btn btn-small" ng-click="removeGroup($index, $event)" ng-show="$index">-</button>
</accordion-heading>
{{group.content}}
</accordion-group>
</accordion>

Answer 2

put just this e.originalEvent.cancelBubble=true;
$scope.addGroup = function(idx, group, e) {
if (e) {
e.originalEvent.cancelBubble=true;
}
var newGroup = angular.copy(group);
newGroup.no = $scope.groups.length + 1;
$scope.groups.splice(idx + 1, 0, newGroup);
};
$scope.removeGroup = function(idx, e) {
if (e) {
e.originalEvent.cancelBubble=true;
}
$scope.groups.splice(idx, 1);
};