title: AngularJS 1.4, bootstrap multi level Accordion sample
body: <p>I want to build a menu something like as below but I am not finding an appropriate sample utilising AngularJS 1.4, bootstrap &amp; accordion. 
  Accordion is a must. Please advise.</p>
  
  <pre><code>menu1
  menu2
    submenu2.1
    submenu2.2
       sub-submenu2.2.1
       sub-submenu2.2.2
  menu3
  </code></pre>
  
  <p>I have added the code below.  Style sheet is Bootstrap.css. Also some custom stylesheet used in project. Accordion menu elements should have different colours at each level of menu. Also the one selected should be displayed in different color. When we hover over elements it should display different color.
  As per the below implementation I have 2 main level elements in menu. The first element is displaying proper accordion behaviour. Second element is always open.
  No stylesheet is getting applied to either of the menu elements. Please advise.</p>
  
  <p><strong>HTML:</strong>    </p>
  
  <pre><code> &lt;script type="text/ng-template" id="menuTree"&gt;
        &lt;uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled"&gt;
          &lt;uib-accordion-heading ng-if="c.pDtos"&gt;
              {{c.name}}
          &lt;/uib-accordion-heading&gt;
          &lt;div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"&gt;&lt;/div&gt;
        &lt;/uib-accordion-group&gt;
    &lt;/script&gt;
  
    &lt;script type="text/ng-template" id="smenuTree"&gt;
        &lt;uib-accordion-group&gt;
          &lt;uib-accordion-heading&gt;
            {{p.name}}
          &lt;/uib-accordion-heading&gt;
          &lt;div ng-show="p.aDtos" ng-repeat="a in p.aDtos"&gt;
            &lt;a ui-sref="crhDetail({ crhId : a.crhId})"&gt;{{a.name}}&lt;/a&gt;
          &lt;/div&gt;
        &lt;/uib-accordion-group&gt;
    &lt;/script&gt;
    &lt;div class="menuSec" ng-controller="menuCtrl"&gt;
      &lt;uib-accordion close-others="true"&gt;
        &lt;div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" &gt;
        &lt;/div&gt;
      &lt;/uib-accordion&gt;    
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Custom CSS:</strong></p>
  
  <pre><code>.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
  .menuSec&gt;ul {position: absolute;background:#2166b3;width:100%;}
  .menuSec&gt;ul&gt;li, .secondLevelList&gt;li, .thirdLevelList&gt;li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
  .secondLevelList, .thirdLevelList{width:220px;}
  .secondLevelList&gt;li, .thirdLevelList&gt;li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
  .selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
  .secondLevelList&gt;.selected{background:#004388;}
  .menuText{position:absolute;text-align:right;right:47px;}
  .menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
  .menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
  .secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
  .secondLevelList{margin-right:-14px;}
  .thirdLevelList{margin-right:-24px;}
  .secondLevelList&gt;li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
  .selected&gt;.secondLevelList&gt;li:hover{background:#004388 !important;}
  .secondLevelList&gt;li:hover{background:#003b78;}
  .thirdLevelList&gt;li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
  .thirdLevelList&gt;li:hover{background:#003871 !important;}
  .thirdLevelList&gt;.selected, .thirdLevelList&gt;.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
  .menuSecCT{width:80px;overflow:hidden;}
  .menuSecCT .menuText{display:none;}
  .menuSec ul li{padding-right:34px;}
  .secondLevelList, .thirdLevelList{display:none;}}
  </code></pre>