UI-Router nested view not working

Question

I am trying to create nested view with angular breadcrumb ... and here the problem is in state app.input1.input2 its own template input2 is not loading.. its only loading app.input1 continuously...

If I try to give wrong templateUrl in app.input1.input2 then it throws error back but when I give correct path then its not loading same template and any error .. it just loading same template of app.input1

Suggest me some idea why that template is 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>

Answer 1

Here is a working plunker. Change made is here:

input1.html

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

The input2 is a child state of input1. So we need to create an anchor/target for it. Check the plunker here

Also, I used this as otherwise:

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