angular-wizard: How to set step2 (or 3,4,..) instead step 1 on form load? - angularjs

Question

I have a form with angular-wizard steps like below
<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<wz-step wz-title="Unqualified">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Source Lead</label>
<input type="text" class="form-control input-sm clearable" ng-model="source_lead" />
</div>
</div>
</wz-step>
<wz-step wz-title="New">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Company</label>
<input type="text" class="form-control input-sm clearable" ng-model="company" />
</div>
</div>
</wz-step>
<wz-step wz-title="Working">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Title</label>
<input type="text" class="form-control input-sm clearable" ng-model="title" />
</div>
</div>
</wz-step>
<wz-step wz-title="Nurturing">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Rating</label>
<input type="text" class="form-control input-sm clearable" ng-model="rating" />
</div>
</div>
</wz-step>
<wz-step wz-title="Converted">
</wz-step>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
</div>
</wizard>
I want to focus to the step "New" (or "Working", or "Converted",...) instead step "Unqualified" on form load.
What can I do? Thanks in advance!

Answer 1

Here's what you can do. In their WizardHandler service, we have access to functions like goTo() (on wizard() which is your current wizard). Like this:
$timeout(function() {
WizardHandler.wizard().goTo("Working");
});
Why inside $timeout?
Because, if the second parameter to $timeout i.e. delay is not provided, the default behaviour is to execute the function after the DOM has completed rendering.
And, we need to execute this after wizard completes rendering.
Here's the working plunker
Alternatively, if you want the previous steps to be visited (visited steps look green with default styles), you can write a loop that goes next() until we reach our desired step (in this case, Working)

Answer 2

Change their position, if you want step "New" to be first, just set it as first.
<wizard on-finish="finishedWizard()" edit-mode="false" indicators-position="top" current-step="currentStep">
<wz-step wz-title="New">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Company</label>
<input type="text" class="form-control input-sm clearable" ng-model="company" />
</div>
</div>
</wz-step>
<wz-step wz-title="Unqualified">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Source Lead</label>
<input type="text" class="form-control input-sm clearable" ng-model="source_lead" />
</div>
</div>
</wz-step>
<wz-step wz-title="Working">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Title</label>
<input type="text" class="form-control input-sm clearable" ng-model="title" />
</div>
</div>
</wz-step>
<wz-step wz-title="Nurturing">
<div class="panel-body">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 remove_padding">
<label class="control-label">Rating</label>
<input type="text" class="form-control input-sm clearable" ng-model="rating" />
</div>
</div>
</wz-step>
<wz-step wz-title="Converted">
</wz-step>
<div class="panel-body">
<button type="submit" class="btn btn-sm btn-primary pull-right" wz-next ng-click="StepCompleted(currentStep)">Completed</button>
</div>
Or you can set wz-order attribute. The is order in which the steps should be in. If no order or duplicated order it will add the step to the end.