JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div>
    <div progress ng-controller="Ctrl">
      <div bar class="bar progress-bar-striped {{progress_transition?'':'progress-no-transition'}}" value='dynamic'>
      </div>
    </div>
</div>
<div ng-controller="MyTabCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">{{pane.content}}</pane>
    </tabs>
</div>

CoffeeScript

angular.module("myApp", ['ui.bootstrap']).controller("MyTabCtrl", ($scope)->
    $scope.panes = [
        {title:"First", content:"Hello world!"},
        {title:"Second", content:"Bonjour monde!"}
    ];
    $scope.panes[0].active = true;
)