Angular UI Bootstrap accordion & nested tabs

by Oliver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script id="uib/template/accordion/accordion-group.html" type="text/ng-template">
    <div class=\ "panel\" ng-class=\ "panelClass || 'panel-default'\">
        <div role=\ "tab\" id=\ "{{::headingId}}\" aria-selected=\ "{{isOpen}}\" class=\ "panel-heading\" ng-keypress=\ "toggleOpen($event)\">
            <h4 class=\ "panel-title\">
      <div role=\"button\" data-toggle=\"collapse\" href aria-expanded=\"{{isOpen}}\" aria-controls=\"{{::panelId}}\" tabindex=\"0\" class=\"accordion-toggle\" ng-click=\"toggleOpen()\" uib-accordion-transclude=\"heading\"><span uib-accordion-header ng-class=\"{'text-muted': isDisabled}\">{{heading}}</span></div>
    </h4>
        </div>
        <div id=\ "{{::panelId}}\" aria-labelledby=\ "{{::headingId}}\" aria-hidden=\ "{{!isOpen}}\" role=\ "tabpanel\" class=\ "panel-collapse collapse\" uib-collapse=\ "!isOpen\">
            <div class=\ "panel-body\" ng-transclude></div>
        </div>
    </div>
</script>

<div ng-app="myapp">
    <div ng-controller="AccordionDemoCtrl">
        <uib-accordion close-others="true">
            <uib-accordion-group is-open="true" heading="Nested tabs within accordion">
                <div class="tabbable boxed parentTabs">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#set1">Tab 1</a>
                        </li>
                        <li>
                            <a href="#set2">Tab 2</a>
                       ...

JavaScript

var app = angular.module('myapp', ['ui.bootstrap', 'ngAnimate'])

app.controller('AccordionDemoCtrl', function($scope) {});


$("ul.nav-tabs a").click(function(e) {
    e.preventDefault();
    $(this).tab('show');
});