Navbar is duplicated automatically while using UI Router - angularjs

Question

I need to have navbar with links for two sub-views: index.file and index.stats but when one of them clicked the new navbar appears inside. How to fix it?
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('index', {
url: '',
templateUrl: "../../index.html",
controller: "Controller"
})
.state('index.file', {
templateUrl: "../js/views/file.html"
})
.state('index.stats', {
templateUrl: "../js/views/stats.html"
})
});
index.html
<div class="container">
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="index.file">File</a></li>
<li class="active"><a ui-sref="index.stats">Stats</a></li>
</ul>
</nav>
<div ui-view></div>
</div>

Answer 1

I know your problem is solved, But this may help others.
Generally the duplication in routes occurs when you try to land into the same base html where you include other html pages.
E.g : If my index.html has something like this
<div ng-include="navbar.html"></div>
<div ui-view></div>
In the navbar.html, you try to do the following
<a ui-sref="index">index</a>
$stateprovider.state='index',{
url:'/index', template: 'index.html'});
Then the index.html would be rendered with a duplicate view with a self reference of itself. To solve the problem, avoid including the same template. (Its better to always have home.html/landing.html saperated from index.html)