angular-ui collapse isn't triggered in closed accordion

Question

It seems the collapse expression is not being triggered inside a closed accordion. ng-hide however does work which is lacking the pretty animation of course.

I made this plunker to show this.

The radio buttons on top determine whether the box "collapse something" inside the accordion. If you open an accordion tab you can toggle it with the radio buttons. However if you have the accordion closed and select "yes" and open the accordion then, the ng-hide expression will have been triggered but not the collapse one.

<div data-collapse=" test != 'yes' ">
    collapse something
</div>

Above will not show where's below will:

<div data-ng-hide=" test != 'yes' ">
    show something
</div>

Now I guess this might have something to do with the accordion using collapse to show the accordion body... I might have to go and create a collapse clone with animations if there is nothing else I can do.

Any ideas are appreciated.

Answer 1

I think you are dealing with a general bootstrap issue. If you toggle collapse on something with 0 height you result in an inline style of 0px;

<div data-collapse=" test != 'yes' " class="ng-binding collapsing" style="height: 0px;">