JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
    <div ng-controller="homeCtrl">
        <button ng-click="play()" play class="btn btn-default glyphicon glyphicon-play"></button>
        <tabset>
            <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active">{{tab}}</tab>
        </tabset>
    </div>
</div>

JavaScript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function ($scope, $interval) {
    $scope.tabs = [{
        id: 1,
        name: "Tab 1",
        message: "",
        active: true
    }, {
        id: 2,
        name: "Tab 2",
        message: "",
        active: false
    }, {
        id: 3,
        name: "Tab 3",
        message: "",
        active: false
    }];

}).directive('play', ['$interval', function ($interval) {
    return {
        restrict: 'A',
        link: function ($scope, $element, attrs) {
            var i = 0,
                interval;

            var play = function () {
                stop();
                interval = $interval(function () {
                    $scope.tabs[i].active = false;
                    $scope.tabs[i++].active = true;
                    i = i % 3;
                }, 1000);
            };

            var stop = function () {
                $interval.cancel(interval);
            };
            console.log($element, attrs);

            $element.on('click', function ($event) {
                if ($element.hasClass("glyphicon-pause")) {
                    $element.removeClass("glyphicon-pause").addClass("glyphicon-play");
                    stop();
                } else {
                    $element.removeClass("glyphicon-play").addClass("glyphicon-pause");
                    play();
                }
            });
        }
    };
}]);