JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="modal-body">
<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tab1" data-toggle="tab">
                <div>{{current.data}}</div>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane " id="tab1" ng-class="{active:current.index==0}">
            <textarea class="form-control" ng-model="first" name="first" required></textarea>
            <md-button class="md-raised md-primary" ng-click="next()">next</md-button>
            <md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
        </div>
        <div class="tab-pane" id="tab2" ng-class="{active:current.index==1}">
            <textarea class="form-control" ng-model="second" name="second" required></textarea>
            <md-button class="md-raised md-primary" ng-click="next()">next</md-button>
            <md-button class="md-warn md-raised" ng-click="previous()">previous</md-button>
        </div>
    </div>
</div>
</div>

JavaScript

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.dataSet = [
                { data: "First", index: 0 },
                { data: "Second", index: 1 }   
            ],
            $scope.current = $scope.dataSet[0],
            $scope.next = function() {
                var i = $scope.getIndex($scope.current.index, 1);
                $scope.current = $scope.dataSet[i];
            },
            $scope.previous = function() {
                var i = $scope.getIndex($scope.current.index, -1);
                $scope.current = $scope.dataSet[i];
            },
            $scope.getIndex = function(currentIndex, shift) {
                var len = $scope.dataSet.length;
                return (((currentIndex + shift) + len) % len)
            }
});