angularjs - UI-Router nested view not working -

angularjs - UI-Router nested view not working -

i trying create nested view angular breadcrumb ... , here problem in state app.input1.input2 own template input2 not loading.. loading app.input1 continuously...

if seek give wrong templateurl in app.input1.input2 throws error when give right path not loading same template , error .. loading same template of app.input1

suggest me thought why template not loading?

#app.js

$stateprovider .state('app', { abstract: true, url: '/app', templateurl: 'view/abc.html', data: { breadcrumbproxy: 'app.start' } }) .state('app.start', { url: '/start', templateurl: 'view/start.html', data: { displayname: 'start', } }) .state('app.input1', { url: '/input1', templateurl: 'view/input1.html', data: { displayname: 'input1', } }) .state('app.input1.input2', { url: '/input2', templateurl: 'view/input2', data: { displayname: 'input2', } }); $urlrouterprovider.otherwise('app.start');

index.html

<div ui-view></div>

abc.html

<div ui-view></div>

start.html

<div> <a ui-sref="app.input1">input1</a> </div>

input1.html

<div> <a ui-sref="app.input1.input2">input2</a> </div>

input2.html

<div>bla bla bla bla</div>

here a working plunker. alter made here:

input1.html

<div> <a ui-sref="app.input1.input2">input2</a> <div ui-view></div> // anchor kid </div>

the input2 kid state of input1. need create anchor/target it. check plunker here

also, used otherwise:

$urlrouterprovider.otherwise('/app/start');

angularjs nested state angular-ui-router breadcrumbs