JSFiddle - React, Tailwind, and code Playground
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>
<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', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('one', {
url: '/',
templateUrl: '/one.html',
controller: 'MyCtrl'
})
$urlRouterProvider.otherwise('/');
}).run(function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
});
myapp.controller('MyCtrl', function ($scope) {
$scope.templateUrl = '/mobileTemplate.html';
});
myapp.controller('AccordionDemo', function ($scope) {
$scope.groups = [
{
title: "Dynamic Group Header - 1",
routePath: "one.html",
number: 1,
current: true
},
{
title: "Dynamic Group Header - 2",
routePath: "two.html",
number: 2,
current: false
}
];
});