AngularJS. ng-include inside of ng-view infinitely loads content of ng-view

Question

this is result of ng-include inside of ng-view output:

Of course, I need to load this page only one time.

My app.js:

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider

    .when('/first_route', {
        templateUrl: '/templates/first/index.html',
        controller: 'FirstController',
        controllerAs: 'First',
    })
    .when('/second_route', {
        templateUrl: '/templates/second/index.html',
        controller: 'SecondController',
        controllerAs: 'Second',
    });

// I omitted my app.run(), because it contains only headers and redirect to 
// login page for not authenticated users

};

In my main index.html file I use only ng-view directive.

My first/index.html contains:

<h1>Current page</h1>
<ng-include src="'first/show.html'"></ng-include>
// remaining part of page

My first/show.html contains:

<ng-include src="'second/index.html'"></ng-include>

Resume: I try to load templates in next order:

1. index.html (ng-view)
2. first/index.html(ng-include)
3. first/show.html(ng-include)

How to solve this issue?

Answer 1

I solved the problem.

The issue was in incorrect path, so, when ng-include can't find the template, it become infinitely loading itself.

Answer 2

For someone who maybe having similar issue, make sure that first/index.html and first/show.html contains the content you want to show (not empty page) else you might also have the same loop as above!