JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.4.0/ui-bootstrap-tpls.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div ng-controller="mainCtrl">
<tabset>
<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>
</tab>
</tabset>
</div>
JavaScript
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);
};
});