How can I get formwizard with steps inside directives with angular ui jquery passthrough to work?

Question

I have tried the jquery passthrough in angular with the form wizard and it worked great. Now, however I am having an issue. The jquery passthrough doesn't seem to work when the steps in the formwizard are inside directives (all the steps display instead of just showing you the first one):

<form ui-jq="formwizard" ui-options="{formPluginEnabled: false, validationEnabled: false, focusFirstInput : false,  disableUIStyles : true}" ng-submit="create(currentActivity, selectedCategories)" class="main">
                    <!--STEP 1 -->             
                    <div activity-wizard-step title="Class Activity Info" description="Add all info about the activity" src="resources/angular/templates/activity_wizard/activity_info.html" step-number="1"></div>

                    <!-- STEP 2 -->
                    <div activity-wizard-step title="Add Class(es)" description="dd Instructor-Led-Training (ILT) Classes below. It can be a classroom ILT or a Webinar ILT and contain 1 or more sessions." src="resources/angular/templates/activity_wizard/add_class.html" step-number="2"></div>

</form>

Here is what my activityWizardStep directive looks like:

directivesModule.directive('activityWizardStep', function () {
    return {
        replace: true,
        restrict: 'AE',
        scope: {
            title: '@',
            description: '@',
            src: '@',
            stepNumber: '@'
        },
        templateUrl: 'resources/angular/templates/activity_wizard/wizard_step.html'
    }
});

and wizard_step.html:

<fieldset class="step" id="step{{stepNumber}}">
    Some html
</fieldset>

Like I said earlier, all the steps display all the time. I am thinking this is some kind of timing issue, like the directives or the include isn't in the dom fully when the jquery passthrough tries to initialize the formwizard. Is this what is happening? If so, should I use a $timeout somehwere? If so, where would I put it. Perhaps there is a better way. Any thoughts?

Answer 1

The answer is, don't use the formwizard with angularJS :). After looking at this further ng-switch not only does the job, it simplifies a lot of stuff.

<form ng-switch="navStep" class="main">
    <!--STEP 1 -->             
    <div ng-switch-when="activity_info" activity-wizard-step title="Class Activity Info" description="Add all info about the activity" src="resources/angular/templates/activity_wizard/activity_info.html" step-number="1"></div>

    <!-- STEP 2 -->
    <div ng-switch-when="add_class" activity-wizard-step title="Add Class(es)" description="dd Instructor-Led-Training (ILT) Classes below. It can be a classroom ILT or a Webinar ILT and contain 1 or more sessions." src="resources/angular/templates/activity_wizard/add_class.html" step-number="2"></div>

</form>

Then in the set the navStep when the next and back buttons are clicked.

Basically the awesomeness of angular makes the formwizard unnecessary.