Angularjs nested ui view not working

Question

In one of my applications, I have created a maincontroller and a main page with ui-view. A main_live_video_chat.html is being loaded into the main page ui-view. This subpage main_live_video_chat.html has multiple ui-view with controllers. I have created routes based on different states, these sub ui views works when part of main page, but shows nothing when configured with the sub page main_live_video_chat.html.

The app.config looks as follows:

app.config([
  '$locationProvider',
  '$stateProvider',
  function($locationProvider, $stateProvider) {

    //setup our two states, archive and live
    $stateProvider
      .state('player', {
        abstract: true,
        url: "/",
        views: {
            '': {templateUrl: "views/main.html",  
                controller: "mainController",
                controllerAs: "main"
            },
          //******This config work fine.******
          'schedule@player': { 
                templateUrl: "views/rail/schedule.html",
                controller: "scheduleController",
                controllerAs: "schedule"
            }
        }
      })
      .state('player.live', {
          url: "^/live/:playerId",
          templateUrl: "views/main_live_video_chat.html"

          //******This config doesnt work.******
          //views: {
          //    '@': {
          //        templateUrl: "views/main_live_video_chat.html",
          //    },

          //    'schedule@player': {
          //        templateUrl: "views/rail/schedule.html",
          //        controller: "scheduleController",
          //        controllerAs: "schedule"
          //    },
      })
  }
]);

Please note that this schedule view need to be shown in vi view inside main_live_video_chat.html

Answer 1

It CANNOT work.

The parent state is injecting its template "views/main.html" into index.html

views: {
    '': {templateUrl: "views/main.html", 

And that template is containing the target for side view <div ui-view="schedule">

But child is replacing that parent's template "views/main.html" by this statement

  views: {
      '@': {
          templateUrl: "views/main_live_video_chat.html",

So, now, there is no target <div ui-view="schedule">... and that's why this cannot find its place:

  //******This part doesnt work.******
  //views: {
  //    '@': {
  //        templateUrl: "views/main_live_video_chat.html",
  //    },

  // THERE is NO target 'schedule' created by parent 'player'
  //    'schedule@player': {
  //        templateUrl: "views/rail/schedule.html",
  //        controller: "scheduleController",
  //        controllerAs: "schedule"
  //    },

Solution:

• Either do not replace the parent's unnamed view target... just target 'schedule'... or
• A child must repeat all that stuff again