title: AngularJS Accordion - add accordion heading style
body: <p>I have an accordion list based on <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow noreferrer">angular ui bootstrap</a> like this:</p>
  
  <pre><code>&lt;div ng-controller="AccordionCtrl"&gt;
  &lt;accordion close-others="oneAtTime"&gt;
  
  &lt;accordion-group is-open="l3payOpen"&gt;
      &lt;accordion-heading&gt;
      &lt;span&gt;
          &lt;img class="marginleft" src="/web/bundles/lima3main/images/icon-l3play.png"&gt;
          L3 Pay
          &lt;span class="img-submenu" ng-class="{'imgplus': !l3payOpen, 'imgminus': l3payOpen}"&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;/accordion-heading&gt;
      &lt;ul class="accordion-ul"&gt;
          &lt;li class="accordion-li" ng-class="{active:isActive('/singlepayment')}"&gt;
              &lt;a href="#/singlepayment" id="single-payment"&gt;
                  &lt;img class="marginleft" src="/web/bundles/lima3main/images/icon-singlepayment.png"&gt;
                  Single payment
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="accordion-li" ng-class="{active:isActive('/recurringbilling')}"&gt;
              &lt;a href="#/recurringbilling" id="recurring-billing"&gt;
                  &lt;img class="marginleft" src="/web/bundles/lima3main/images/icon-recurringbilling.png"&gt;
                  Recurring Billing
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/accordion-group&gt;
  
  &lt;accordion-group is-disabled="true"&gt;
      &lt;accordion-heading  &gt;
          &lt;span id="l3-bridge" ng-click="redirect('l3bridge')"&gt;
              &lt;img class="marginleft" src="/web/bundles/lima3main/images/icon-l3bridge.png"&gt;
              L3 Bridge
          &lt;/span&gt;
      &lt;/accordion-heading&gt;
  &lt;/accordion-group&gt;
  
  
  &lt;/accordion&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, this accordion shows like this:</p>
  
  <p><img src="https://i.stack.imgur.com/nJbxn.png" alt="enter image description here"></p>
  
  <p>If you can see, there is an <code>ng-class</code> named isActive which <strong>applies</strong> in the <code>li tag</code> :</p>
  
  <pre><code>$scope.isActive = function(route) {
      return route === $location.path();
  }
  </code></pre>
  
  <p>So when you click in any <code>li</code> the class works perfectly: </p>
  
  <p><img src="https://i.stack.imgur.com/xOlrb.png" alt="enter image description here"></p>
  
  <p>So, the problem is when I apply that ng-class in the other accordion groups which doesn't have the <code>li</code>s tag. And i can't apply it to span tag because the style shows like this:</p>
  
  <p><img src="https://i.stack.imgur.com/oXGPB.png" alt="enter image description here"></p>
  
  <p>Is there something that I can do ?</p>