How to handle different content depending on selected element in the same sidebar

Imaging that we have animals table. Each row describes one animal, for example: ID, NAME, TYPE.

Depending on the selected row type, I want show is the sidebar content related to that animal and some user actions.

Content is completely different, it pulls from data from different APIs. But the sidebar placed always in the same position, same size and styles.

Maybe I'll have common actions for each controller, like -> close sidebar.

If sidebar already opened and user switch to another one, sidebar should change immediately.

How should I design such login with angular ?

I got an idea to define one directive in html for sidebar. And set listener for selected row, after that compile dynamically sidebar directive for selected row, and insert into parent (main) sidebar. Probably also I need to handle destroy of previous one.

I appreciate if anyone can tell is I'm going the right way... or should I change something ?