Mixing a Table with Angular-UI Accordion

Question

I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it. I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :

<table class="table table-hover table-condensed" thead>
    <thead>
        <tr>
            <th>{{ data.profile.firstname }}</th>
            <th>{{ data.profile.lastname }}</th>
            <th>{{ data.profile.email }}</th>
            <th>{{ data.profile.company_name }}</th>
            <th>{{ data.profile.city }}</th>
        </tr>
    </thead>
    <tbody accordion close-others="true">
        <!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
        <tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
            <accordion-heading>
                <td>{{ client.firstname }}</td>
                <td>{{ client.lastname }}</td>
                <td>{{ client.email }}</td>
                <td>{{ client.company_name }}</td>
                <td>{{ client.city }}</td>
            </accordion-heading>
            Accordion Content
        </tr>
    </tbody>
</table>

Though it's not working :( Is there anyone who succeded to achieve something like this ?

The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.

Solution

1) You can try div instead of table for main accordion. It works for me.

2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/