Advice on complex DOM manipulation with AngularJS and ionic

I saw lots of questions asked here about DOM manipulation in AngularJS. I know directives are the way to go. I have a complex flow where I need to manipulate DOM, animate elements based on remote api calls etc.

Here is the process in brief:

1. Query a remote API and pull topics
2. Create a 4x3 grid and show all the topics with cards and with a fade-in animation that will run sequentially (Already did this with a directive)
3. When a card is clicked, fade out all the other cards
4. Move the card to the centre of the view with an animation
5. Pull the subtopics from the remote API
6. Remove the clicked card with a fade out animation
7. Create a new grid showing all the subtopics again with a fade in animation

Now, I get the separation of concerns is critical to an app, but in this case I think it makes things very complicated.

So in the light of best practices, I will be more than glad to hear your advices to implement such a scenario.

Thanks.