Angular Bootstrap with tabs and carousels

I have a series of Angular Bootstrap tabs (each containing a carousel), my HTML looks something like this:

<tabs>
    <pane>
        <carousel>
            <slide>
                <div>Some content (Pane 1, Slide 1)</div>
            </slide>
            <slide>
                <div>Additional content (Pane 1, Slide 2)</div>
            </slide>
        </carousel>
    </pane>
    <pane>
        <carousel>
            <slide>
                <div>Some more content (Pane 2, Slide 1)</div>
            </slide>
            <slide>
                <div>Even more content (Pane 2, Slide 2)</div>
            </slide>
        </carousel>
    </pane>
</tabs>

I need to be able to tell when a tab is clicked, which slide is active. I then get the heading of the slide and display it on another div. Any thoughts?