How to create a closeable tab in angularjs UI-Bootstrap


I want to create closeable tabs (like chrome tab or firefox tab, which has a small “x” on every tab). How to configure the ready-made tab component in UI-Bootstrap to add this functionality?


Problem courtesy of: janetsmith


you can use html & ng-click in your tab-heading, e.g.

<div ng-controller="mainCtrl">
<tab ng-repeat="t in tabs">
<tab-heading>{{t.title}} <a ng-click="removeTab($index)" href=''><i class="icon-remove"></i></a></tab-heading>
<div ng-bind-html-unsafe='t.content'></div>

angular.module('myApp', ['ui.bootstrap']).controller("mainCtrl", function ($scope) {
$scope.tabs = [{
title: "one",
content: '<h1>tab one</h1>'
}, {
title: "two",
content: '<h1>tab two</h1>'
}, {
title: "three",
content: '<h1>tab three</h1>'
$scope.removeTab = function (index) {
$scope.tabs.splice(index, 1);


Solution courtesy of: alfrescian

View additional discussion.