title: Set background color accordion heading
body: <p>I want to change the color of an accordion depending on status on the current item in the list.</p>
  
  <p>I want to use something like <code>ng-class="{status: item.status}"</code> (where I have <code>testClass: true</code>)</p>
  
  <p>The problem now is that I can't set the color of the whole accordion heading.</p>
  
  <pre><code>&lt;accordion&gt;
      &lt;accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open"&gt;
          &lt;accordion-heading&gt;
              &lt;div ng-class="{testClass: true}"&gt;
                  &lt;p&gt;Test&lt;/p&gt;
              &lt;/div&gt;
          &lt;/accordion-heading&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12 col-xs-12"&gt;
                  &lt;div class="text-content font-size-14"&gt;{{item.text}}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/accordion-group&gt;
  &lt;/accordion&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.testClass {
  background-color: burlywood;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/SnkVY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SnkVY.png" alt="enter image description here"></a></p>
  
  <p>Any idea how to solve this?</p>
  
  <p>I found similar problem here, but the solution didn't work for me
  <a href="https://github.com/angular-ui/bootstrap/issues/3038" rel="nofollow noreferrer">https://github.com/angular-ui/bootstrap/issues/3038</a></p>
  
  <p>fiddle:
  <a href="http://jsfiddle.net/f8ce1b0w/2/" rel="nofollow noreferrer">http://jsfiddle.net/f8ce1b0w/2/</a></p>