JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="myapp">
  
    <div id="container" data-ng-controller="MyCtrl">
            <div data-ng-include="templateUrl">Loading...</div>
    </div>
    
    <script type="text/ng-template" id="/mobileTemplate.html">
            
         <div data-accordion="" data-ng-controller="AccordionDemo">
            <div data-accordion-group="" data-ng-repeat="group in groups" data-is-open="group.current">
                <div data-accordion-heading="">
                    <div class="accordion-heading">
                        <span class="accordion-title">{{ group.number }}. {{ group.title }}</span>
                    </div>
                </div>
               The name of the view is: {{ group.routePath }}
                <div ng-switch="group.current">
                    <div ng-switch-when="true">
                        <div data-ng-view></div>
                    </div>
                </div>
            </div>
           
        </div>
    </script>
    
    <script type="text/ng-template" id="/one.html">
        <p>this is the first view</p>
     </script>
    
</div>

JavaScript

var myapp = angular.module('myapp', ['ui.bootstrap']).config(function ($routeProvider) {
    $routeProvider.when('/one', {
        templateUrl: 'views/steps/one.html',
        controller: 'AccordionDemo'
    }).otherwise({
        redirectTo: '/one'
        
    });
});
myapp.controller('MyCtrl', function ($scope) {
   $scope.templateUrl = '/mobileTemplate.html';
});

myapp.controller('AccordionDemo', function ($scope) {
   $scope.groups = [
    {
      title: "Dynamic Group Header - 1",
      routePath: "step1.html",
       number: 1,
        current: true 
    },
    {
      title: "Dynamic Group Header - 2",
      routePath: "step2.html",
      number: 2,
      current: false
    }
  ];
});