use angular-ui-router with bootstrap $modal to create a multi-step wizard

Alternative way is to use ng-switch with ng-include combination inside $modal controller to dynamically load wizard step templates, that is if you don't mind sharing the same controller for all wizard steps:

<div ng-switch="currentStep.number">  <div ng-switch-when="1">    <ng-include src="'wizardModalStep1.html'"></ng-include>  </div>  <div ng-switch-when="2">    <ng-include src="'wizardModalStep2.html'"></ng-include>  </div>  <div ng-switch-when="3">    <ng-include src="'wizardModalStep3.html'"></ng-include>  </div></div>

Here is Plunker with working example: http://plnkr.co/edit/Og2U2fZSc3VECtPdnhS1?p=preview

Hope that helps someone !!

I used following approach to develop a wizard. this might be help for you.

I used states like below sample with parent property.

 var home = {            name: 'home',            url: '/home',            controller: 'MainController',            templateUrl: '/html/main.html'        },        sampleWizard = {            name: 'sampleWizard',            url: '/sampleWizard',            controller: 'sampleWizardController',            templateUrl: '/html/sd/sample/sampleWizard.html'        },         sampleSectionOne = {             name: 'sampleSectionOne',             url: '/sampleSectionOne',             parent: sampleWizard,            controller: 'sampleSectionOneController',            templateUrl: '/html/sd/sample/sampleSectionOne.html'        },        sampleSectionTwo = {            name: 'sampleSectionTwo',            url: '/sampleSectionTwo',            parent: sampleWizard,            controller: 'sampleSectionTwoController',            templateUrl: '/html/sd/sample/sampleSectionTwo.html'        };        $stateProvider.state(home);        $stateProvider.state(sampleWizard);        $stateProvider.state(sampleSectionOne);        $stateProvider.state(sampleSectionTwo);

I'm not sure you want to fire the modal every single time you go to the next step.

I think all you have to do is create a modal view () then each step has a modal a templateUrl assigned to it.

each template should look like:

<div class="modal fade in" id="whatever" style="display:block">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                <h4 class="modal-title">Modal title</h4>            </div>            <div class="modal-body">                <p>One fine body…</p>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                <a ui-sref="next_page_route_id" type="button" class="btn btn-primary">Next</a>            </div>        </div><!-- /.modal-content -->    </div><!-- /.modal-dialog --></div><!-- /.modal --><div class="modal-backdrop fade in"></div>

On the last screen you can add a data-dismiss="modal" to the submit and you are done