How to use ui-sref in nested Angular UI router?

Its has been a heavy hours research and applying the techniques however I am not able to solve the issue. My app has three top navigations which are home, sports and country.

<head>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/index.js"></script>
</head>

The navigation looks like:
HTML looks like below which is in index.html

<ul> 
    <li><a ui-sref="home">Home</a></li>
    <li><a ui-sref="sports">Sports</a></li>
    <li><a ui-sref="country">Country</a></li>
</ul>
<div ui-view></div>

In sports.html, there are other three navigation, which are not working (they are not even clickable).

<ul> 
    <li><a ui-sref="sports.football">Football</a></li>
    <li><a ui-sref="sports.weightlifting">Weightlifting</a></li>
    <li><a ui-sref="sports.swimming">Swimming</a></li>
</ul>
<div ui-view></div>

Angular looks like

$stateProvider
.state('home', {
url: '/', 
templateUrl: 'index.html'      
})
.state('sports', {
url: '/sports', 
templateUrl: 'sports.html'      
})    
.state('country', {
url: '/country', 
templateUrl: 'country.html'      
})
.state('sports.football', {
url: '/football', 
templateUrl: 'sports/football.html'      
})
.state('sports.weightlifting', {
url: '/weightlifting', 
templateUrl: 'sports/weightlifting.html'      
})
.state('sports.swimming', {
url: '/swimming', 
templateUrl: 'sports/swimming.html'      
});

Basically, when a user opens the app, there should be top menu bar with Home, Sports and Country. When a user clicks Sports then there should be another view shown/ another sub navigation in this page showing Football, Weightlifting and Swimming. However these sub navigations are not clickable and not working.

It would be grateful if you can help me to find what would be the problem.

Solution

There is no issue in your code. Probably you might be missing some dependencies. Check out my plunker.click here to view code demo

app.js

(function(){

    angular
  .module('plunker', ['ui.router']);

  })();

router.js

(function(){

      'use strict';

      angular
      .module('plunker')
      .config(['$stateProvider', function($stateProvider)
      {
          $stateProvider
          .state('home', {
                  url: '/', 
                templateUrl: 'home.html'      
                })
          .state('sports', {
          url: '/sports', 
          templateUrl: 'sports.html'      
          })    
            .state('sports.football', {
            url: '/football', 
            templateUrl: 'football.html'      
            })
            .state('sports.weightlifting', {
            url: '/weightlifting', 
            templateUrl: 'weightlifting.html'      
            })
            .state('sports.swimming', {
            url: '/swimming', 
            templateUrl: 'swimming.html'      
            })
          .state('country', {
          url: '/country', 
          templateUrl: 'country.html'      
          });

      }])


    })();