title: How to set class/style of accordion heading in Angular UI
body: <p>I'm using Angular UI to render littel database entries in an accordion. In a first trial, I used bootstrap, but as I integrated AngularJS views, accordion is no more fully working (empty href...). I then replaced my bootstrap accordion with angular UI bootstrap one and the default template.</p>
  
  <p>My problem is that in the bootstrap version, I managed to stylized the heading depending on the accordion title (I was using the ng-repeat directive, and the ng-style inside the heading). I tried to do the same with Angular UI, but even my custom class is not rendered.</p>
  
  <p>This sample code was working great with bootstrap, but no more with ui.boostrap accordion :</p>
  
  <pre><code>accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
     accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}")
           {{item.title}}   ({{item.importance}})
  </code></pre>
  
  <p>The goal here is to apply a different style (background color and text color) based on an item field. Furthermore, the class accordion-headingLog is to resize the accordion default size.</p>
  
  <p>Here is the rendered code :</p>
  
  <pre><code>&lt;div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"&gt;
     &lt;div class="accordion-heading"&gt;
        &lt;a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading"&gt;
  ......
  </code></pre>
  
  <p>And I was expecting something like :</p>
  
  <pre><code>&lt;div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search"&gt;
     &lt;div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);"&gt;
  </code></pre>
  
  <p>[EDIT]
  I tried to put the accordion-headingLog class with ng-class attribute, but it does not work either. Just to test, I tried to apply the class and the style inside the body of the accordion, and it works well. I conclue that the accordionHeading directive does not accept any class or attribute ? How to dynamically apply a style on the heading then ???</p>
  
  <p>[EDIT]
  Another trial was to build my own template. I am able to apply the accordion-headingLog class to the heading, but how can I set a customizable style ? I tried to use ng-style and apply a fixed style, but it does not work.</p>
  
  <pre><code>script(type="text/ng-template", id="template/accordion/accordion-group.html").
      div.accordion-group
      div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456")
         a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}}
      div.accordion-body(collapse="!isOpen")
         div.accordion-inner(ng-transclude)
  </code></pre>