What is the best practice for angularjs and directives in the given workflow?

We have created a three window wizard. They are all three divs on the same page (or could be broken into partials if a better solution presents itself). We use jquery's fadein/out to transition through the wizard's divs. They all share some data objects they must all be aware of during the wizard. The second window is simply a "One Moment Please" waiting on a callback from an ajax call before transitioning to the third window.

We have loaded the fadein/out into a directive and it works. The issue is we track the state of the DOM elements in the controller with a 'flag'.

$scope.someDomId == 'visible' or 'hidden'.

The directive watches for changes on said id and takes appropriate action if its changed.

This works, but it seems ugly to me. True we have removed Dom manipulation from the controller, but replaced it with a gross flagging system.

Is this the best practice? Is this really better? Yes it can be unit tested more easily now, but that is the only perceived benefit I see at this point.

You can have situation with several directives on one page related to one flag variable in controller. And they will work separately this way.