title: Override Bootstrap Accordion colors in bootstrap for angularjs
body: <p>I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (<a href="https://stackoverflow.com/questions/18806163/add-class-to-accordion-heading-using-angualr-ui-bootstrap?answertab=votes#tab-top">Add class to accordion heading using angualr ui bootstrap?</a>) and it's Jsfiddle (<a href="http://jsfiddle.net/Zmhx5/3/" rel="nofollow noreferrer">http://jsfiddle.net/Zmhx5/3/</a>) represent my problem perfectly, but does not explain the solution. </p>
  
  <p>I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.</p>
  
  <pre><code>.panel-heading {
  background-color: red;
  }
  </code></pre>
  
  <p>This website has a tutorial on accordions and its css simply overwrote it (<a href="http://patternry.com/p=accordion/" rel="nofollow noreferrer">http://patternry.com/p=accordion/</a>). I tried doing the same but it did not work, please help :/</p>