Angular routing doesn't work for controllers with same module names
<p>This is a simple angular app which seems to have a silly mistake in the code, I'm not quite able to figure it out.
The problem lies with the routing. Clicking on the links doesn't take me to the specified template url, instead reloads the same index.html page.</p>

<p>However, the link in the address bar changes to:</p>

<p><a href="http://localhost:8000/app/#/stats" rel="nofollow noreferrer">http://localhost:8000/app/#/stats</a></p>

<p><a href="http://localhost:8000/app/#/sports" rel="nofollow noreferrer">http://localhost:8000/app/#/sports</a></p>

<p>on clicking the respective links.</p>

<p>index.html</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en" ng-app="myApp"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;My AngularJS App&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/style.css"/&gt;

  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/myStats.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers/mySports.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;a ng-href="#/stats"&gt;My Stats&lt;/a&gt;
    &lt;a ng-href="#/sports"&gt;My Sports&lt;/a&gt;
  &lt;/div&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>app.js</p>

<pre><code>'use strict';
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
  $routeProvider
      .when('/stats', {
        templateUrl: 'partials/stats.html'


      })
      .when('/sports', {
        templateUrl: 'partials/sports.html'
      })
}]);
</code></pre>

<p>I hope there's nothing wrong with my directory structure:</p>

<p><a href="https://i.stack.imgur.com/IuBEW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IuBEW.png" alt="Directory structure for the application"></a></p>

<p><strong>EDIT:</strong></p>

<p>sharing code for controllers, the problem is in the controllers. It has to do something with angular modules having same names, although this was how I was taught.</p>

<p><strong>js/controllers/mySports.js</strong></p>

<pre><code>angular.module('myApp',[])
    .controller('mySports',['$scope', function($scope){
        console.log('just checking');

    }]);
</code></pre>

<p><strong>What worked:</strong>
Changing module name in mySports.js from <strong>myApp</strong> to <strong>mySports</strong>, and then injecting <strong>mySports</strong> as a dependency in <strong>app.js</strong>. </p>

<p>Updated <strong>app.js</strong> to this:</p>

<pre><code>'use strict';
    angular.module('myApp', ['ngRoute','mySports'])
    .config(['$routeProvider', function($routeProvider){
      $routeProvider
          .when('/stats', {
            templateUrl: 'partials/stats.html'
          })
          .when('/sports', {
            templateUrl: 'partials/sports.html'
            controller: mySports,
          })
    }]);
</code></pre>

<p><strong>EDIT</strong></p>

<p>What still remains the question is to why change the module names of controllers and then inject as dependencies into <strong>app.js</strong>? Why not have the same module names?</p>