Angular ng-router not working

I am learning angular-js and I am trying to use ng-route with ng-view.But somehow it is not working.

App runs on nginx. My code is

src/index.html

<html lang="en" ng-app="demoApp">
    <head>
        <!-- Latest compiled and minified CSS -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>


        <script src="js/app.js"></script>
        <script src="js/demo_controller.js"></script>



    </head>

    <body>
        <div ng-view>
        </div>


    </body>
</html>

src/js/controllers/demo_controller.js

demoApp.controller('demoController',function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

src/js/app.js

var demoApp = angular.module('demoApp', ['ngRoute']);

demoApp .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/route', {
        templateUrl: 'templates/demo_template.html',
        controller: 'demoController'
      });
  }]);

src/templates/demo_template.html

<div  >

First Name: <input type="text" ng-model="firstName"/><br>
Last Name: <input type="text" ng-model="lastName"/><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

nginx configuration

server_name mypr.app.local;

location /ui {
     alias /home/vagrant/www/mypr-ui/src;
     try_files $uri $uri/ /index.html =404;
  }

url I tried

mypr.app.local/ui/route

In the console I can see that is getting commented out

<!-- ngView:  -->

Solution

Index.html

<html lang="en" ng-app="demoApp">
        <head>
            <!-- Latest compiled and minified CSS -->

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>

        </head>

        <body>
            <div ng-view>
            </div>


        </body>

    <script>
    var demoApp = angular.module('demoApp', ['ngRoute']);

    demoApp .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/route', {
            templateUrl: 'demo_template.html',
            controller: 'demoController'
          })

    $routeProvider.otherwise('/route');
      }]);

        demoApp.controller('demoController',function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
    </script>
    </html>

Template:

<div>

    First Name: <input type="text" ng-model="firstName"/><br>
    Last Name: <input type="text" ng-model="lastName"/><br>
    <br>
    Full Name: {{firstName + " " + lastName}}

    </div>

Change template URL according to your file location

URL like : http://localhost:8080/#/route