AngularJS UI-Router nested views

Question

I am trying to put a nested view inside my modal. I can pull in the first-layer views fine but the nested view is tricking me somehow. Not sure what I am missing here?

http://plnkr.co/edit/g9cScdORPOz57zGCzQDA

var App = angular.module('App', ['ui.router']);

// routes
// -------------------------
App.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // default state route
  .state('app',{
    url: '/',
    views: {
      'content': {
        templateUrl: 'home.html'
      },
      'modals': {
        templateUrl: 'modal.html'
      }
    }
  })

  // + modal content
  .state('app.form', {
      url: '/form',
      views: {
        'modal-content@modals': {
          templateUrl: 'form.html'
        }
      }
  })

  //catch all route
  $urlRouterProvider.otherwise('/');

})

Answer 1

Like Nikhil.agw said, you are not changing your state when you open your modal.

You could do it like that: http://plnkr.co/edit/eMNBBUYmKI6PRPiyU4xx?p=preview

<li><a href="#" data-toggle="modal" ui-sref="app.form" data-target="#myModal">Open this modal</a></li>

Then just include a way to return to the previous state when the modal closes.

Answer 2

It is not going to work because on click you are only toggling the modal. Your state/route is not being changed. And route/state is not being changed, how will the nested state come in picture?