AngularJS route does nothing

I am a newbie, trying to understand routing, I read the documentation and i injected ngRoute module, but still when i am trying to click on Employee Name its not showing any thing, i have wasted lot of time on this, but no luck. Can some one help.

No errors in the console.

Code:

Plunker

app.js

var app = angular.module('demoApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/employeedetail/:empid',
            {
                controller: 'empDetailController',
                templateUrl: '/employeedetail.html'
            })
        .otherwise({ redirectTo: '/index.html' });
});

Solution

The $routeProvider have to be used in conjection with the ng-view directive.

In index.html, replace the employee list template with ng-view, and also remove the controller like this:

<body>
  <h2>AngularJS Demo</h2>
  <div ng-view></div>
</body>

Put the employee list template as a separate html file e.g. employeelist.html.

Then config the $routeProvider to render the employee list template and its controller by default:

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller: 'employeeController',
      templateUrl: 'employeelist.html'
    })
    .when('/employeedetail/:empid', {
      controller: 'empDetailController',
      templateUrl: 'employeedetail.html'
    })
    .otherwise({
      redirectTo: '/'
    });
})

Example Plunker: http://plnkr.co/edit/mQIaJqZeOal77Z2RxG8z?p=preview