ui-router navigate to another state onEnter

Question

I have a wizard flow A that collects informationA

    states["wizard"] = {
        abstract: true,
        url: "^/wizard",
        controller: "wizardController",
        templateUrl: "wizard.html"
    };

    states["wizard.input"] = {
        url: "^/input",
        views: {
            "": {
                controller: "wizardController",
                templateUrl: "form.html"
            }
        }
    }
    states["wizard.completed"] = {
        templateUrl: "completed.html"
    };

And another wizard flow B that's the similar structure that's collecting informationB.

What I want to do is when the user navigates to /wizard, it checks if informationB is filled, if not, navigate to fill informationB first and then navigate back to /wizard to continue the wizardA.

What's the best way to do the redirection when the user navigates to /wizard and the best way to return to /wizard when wizardB finishes?

For the return I could pass some param in the url and in the wizardB controller check to see if it needs to go to wizardA, but couldn't quite figure out how to do the first redirect.

Thanks in advance.

Answer 1

Thanks charlietfl for the information, use resolve to process redirect looks good! Here's how I end up doing:

var redirect = (returnState: string) => {
        return ['$q', '$timeout', '$state', 'dataModel', ($q, $timeout, $state, dataModel) => {
                var deferred = $q.defer();
                $timeout(() => {
                    if (dataModel.informationB === "") {
                        $state.go('wizardB.input', { rs: returnState });
                        deferred.reject();
                    } else {
                        // everything is fine, proceed
                        deferred.resolve();
                    }
                });

                return deferred.promise;
            }
        ];
    }

and in the state config:

    resolve: {
            redirect: redirect("wizardA.input")
        }