JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="app">
    <div ng-controller="homeCtrl">
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group">
                    <input type="number" ng-model="interval" class="form-control" placeholder="Set intervals"></input>
                    <span class="input-group-btn">
                         <button tabs-carousel="" ng-click="togglePlay()" class="btn btn-default" type="button">
                              <span class="glyphicon glyphicon-search" ng-class="{'glyphicon-play': !isPlaying, 'glyphicon-pause': isPlaying}"></span>
                         </button>
                     </span>
                </div>
            </div>
        </div>

        <tabset>
            <!-- <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active" select="tabSelected($index)" disabled="isPlaying"> -->
            <tab ng-repeat="tab in tabs" active="tab.active" select="tabSelected($index)" disabled="isPlaying">
                <tab-heading>
                    {{tab.name}}
                    <a ng-click="removeTab($index)" href=''>
                        <i class="glyphicon glyphicon-remove"></i>
                    </a>
                </tab-heading>
                <div ng-bind="tab.name"></div>
            </tab>
            <li> <a ng-click="addTab($event)">
                    <i class="glyphicon glyphicon-plus-sign"></i>
                </a>

            </li>
        </tabset>
        <slider class="progress-striped" id="sliderelem4" min="0" updateOnDrag="true" max="{{sliderMax}}" btn-class="btn-sm btn-info" bar-class="progress-bar-success" ng-model="active_tab_i">{{active_tab_i}}</slider>
    </div>
</div>

JavaScript

var app = angular.module('app', ['ui.bootstrap']);

app.controller('homeCtrl', function ($scope) {
    $scope.tabs = [{
        name: "Tab 1",
        active: true
    }, {
        name: "Tab 2",
        active: false
    }, {
        name: "Tab 3",
        active: false
    }];

    $scope.interval = 1000;
    $scope.sliderMax = $scope.tabs.length - 1;
    $scope.active_tab_i = 0;
    $scope.$watch('active_tab_i', function (i) {
        $scope.tabs[i].active = true;
    });
    $scope.tabSelected = function (i) {
        $scope.active_tab_i = i;
    };

    var setAllInactive = function () {
        for (var i = 0; i < $scope.tabs.length; ++i) {
            $scope.tabs[i].active = false;
        }
    };

    var addNewTab = function () {
        $scope.tabs.push({
            name: "Tab " + ($scope.tabs.length + 1),
            active: !$scope.isPlaying
        });

        $scope.sliderMax = $scope.tabs.length - 1;
        $scope.active_tab_i = $scope.tabs.length - 1;
    };

    $scope.addTab = function ($event) {
        if (!$scope.isPlaying) setAllInactive();
        addNewTab();
    };
    
    $scope.removeTab = function (index) {
        $scope.tabs.splice(index, 1);
        
        $scope.sliderMax = $scope.tabs.length - 1;
        $scope.active_tab_i = $scope.tabs.length - 1;
    };
});

app.directive('tabsCarousel', ['$interval', function ($interval) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {

            //var getActiveTabIdx = function () {
            //    for (var i = 0; i < $scope.tabs.length; ++i) {
            //        if ($scope.tabs[i].active) {
            //            return i;
            //        }
            //    }
            //};

            var interval;
            var play = function () {
                //var i = getActiveTabIdx();
                var i = $scope.active_tab_i;
                $scope.isPlaying = true;
                interval = $interval(function () {
           ...