JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane heading="Static title">Static content</pane>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">{{pane.content}}</pane>
    </tabs>
    <div class="row-fluid">
        <button class="btn" ng-click="panes[0].active = true">Select second tab</button>
        <button class="btn" ng-click="panes[1].active = true">Select third tab</button>
    </div>
</div>
    
</div>

JavaScript

'use strict';

function MyCtrl1() {}


MyCtrl1.$inject = [];


function MyCtrl2() {}
MyCtrl2.$inject = [];

angular.module('myApp', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.panes = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2" }
  ];
};
TabsDemoCtrl.$inject = ['$scope'];