simple simple - 8 months ago 84
AngularJS Question

Angular ui router - nested view inside modal

I want to put a Steps Wizard into a Modal.

Here is my working Wizard: plunker

Here is my working modal:

How do I add this working wizard to a modal? Can nested states be multiple states or limited to no more than two?

.config(function($stateProvider, $urlRouterProvider) {


// route to show our basic form (/form)
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'

// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'

// url will be /form/interests
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'

// url will be /form/payment
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'

// catch all route
// send users to the form page


just merge your HTML and JS files, move ui-view inside modal HTML:

<body ng-app="formApp">

  <div ng-controller="MainCtrl as mainCtrl">

    <button type="button" 
            class="btn btn-default"    
            ng-click="">Open Modal</button>

    <!-- modal -->
    <script type="text/ng-template" id="myModalContent.html">
      <div class="modal-header">
          <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
      <div class="modal-body" id="modal-body">
          <!-- views will be injected here -->
          <div class="container">
              <div ui-view></div>
      <div class="modal-footer">
        <button class="btn btn-default pull-left" 


  <div class="row">
      <div class="col-sm-8 col-sm-offset-2">
      <div class="jumbotron text-muted text-center">
          <p>a tutorial by <a href="" target="_blank"></a></p>
          <p><a href="">Create a Multi-Step Form Using Angular and UI-Router</a></p>