Adding elements to accordion headings with angular

Question

In the angular application I'm working on, I need to display some data with an accordion and add a button or some other kind of marker to each heading. Here's an example of what I'm after using the the Twitter bootstrap accordion:

http://plnkr.co/edit/vV9Ky12jlrKb4qrcRnhA

With just a bit of jQuery, I can append the element I want to the accordion-toggle element.

I'm trying to do the same thing using only angular-ui. Here's what I have so far:

http://plnkr.co/edit/sv43rrvU8rvDHplagZ2v

As you can see, it doesn't quite work as I'd like. The element (here, a simple span) is added to the heading as long as I'm not in a ng-repeat loop. Obviously, for this loop, the accordion-heading is not available yet when I'm plugging my directive. How should I modify it so that it get called at the proper time (or at least, when the accordion DOM has been compiled) ?

Answer 1

I don't know of an elegant solution for waiting on the dom to render ng-repeats, but wrapping your dom lookups in the $timeout method will get the desired results in this case:

$timeout(function(){
    var heading = element.parent().children().find('.accordion-toggle');
    console.log("found heading", heading);
    console.log("adding element", element.html());
    heading.append(element);
    console.log("yay");
},0)

Plunk