JSFiddle - React, Tailwind, and code Playground

by themyth92

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<body ng-app='myApp' ng-controller="MainController as main">
    <accordion>
        <div ng-repeat="r in main.results" ng-controller="DetailsController as d">
            <accordion-group is-open="d.isOpen">
                <accordion-heading>{{r.name}}</accordion-heading>
                <ul>
                    <li ng-repeat="v in d.details">{{v.detail}}</li>
                </ul>
            </accordion-group>
        </div>
    </accordion>
</body>

JavaScript

angular.module('myApp', ['ui.bootstrap'])
    .controller('MainController', function () {
    this.results = [{
        id: 1,
        name: 'Header 1'
    }, {
        id: 2,
        name: 'Header 2'
    }, {
        id: 3,
        name: 'Header 3'
    }];
})
    .controller('DetailsController', function (detailsService, $scope) {

    var vm = this
    vm.details = [];

    $scope.$watch('d.isOpen', function () {
        if ($scope.d.isOpen) {
            detailsService.get().then(function (data) {
                vm.details = data;
            })
        }
    })
})
    .service('detailsService', function ($timeout) {
    this.get = function () {
        return $timeout(function () {
            return [{
                detail: 'details1'
            }, {
                detail: 'details2'
            }, {
                detail: 'details3'
            }]
        }, 1000)
    }
});