Angular-Ui-Router state changes but template URL doesn't load for nested states

Question

I am working on an a requirejs + angularjs project with ui-router . I tried to implement nested views but only the state changes but the template URL doesn't load.

My route-config.js

.state(ROUTE.auditGroup, {
  abstract: true,
  authenticate: true,
  data: {
    pageTitle: 'AuditMain'
  },
  views: {
    'user': {
      templateUrl: GLOBAL.viewPath + '/auditgroup.html',
    }
  }
})

.state(ROUTE.audit, {
  url: '/audit',
  authenticate: true,
  data: {
    pageTitle: 'Audit'
  },
  views: {
    'nested': {
      templateUrl: GLOBAL.viewPath + '/audit.html',
      controller: 'auditCtrl',
    }
  },
  ncyBreadcrumb: {
    label: 'Audit',
  }
})

.state(ROUTE.allidentifiers, {
  url: '/allidentifiers',
  authenticate: true,
  data: {
    pageTitle: 'All Identifiers'
  },
  views: {
    'nested': {
      templateUrl: GLOBAL.viewPath + '/audit.allidentifiers.html',
      controller: 'allidentifiersCtrl',
    }
  },
  ncyBreadcrumb: {
    label: 'All Identifiers',
  }
})

My auditgroup.html

<div ui-view="nested"></div>

The Audit Page Works fine but, the allidentifiers page is not injected. Everything works fine except nested views, I could not figure out the exact problem , state changes successfully but the template URL doesn't load. Need assistance.

Plunkr https://embed.plnkr.co/oRMnMW4QoWwhSkm9maHf/

Goto > list>Second Nested

I want to include second nested template in same view

Answer 1

You need to have ui-view for the nested template to show. See the updated plunker here: https://plnkr.co/edit/oRMnMW4QoWwhSkm9maHf?p=preview