angularjs - Nothing happens when Angular Href is clicked -

i using angular routing webapi 2 controller.

although default path loads correct data, when click on item in list containing link details page, no data loaded.

the browser shows believe correct url (http://localhost:xxxxx/#/details/2) detailscontroller script file not called , no method on webapi2 controller called.

here main page :

<div class="jumbotron">     <h1>movies example</h1> </div>  @section scripts {     <script src="~/scripts/angular.js"></script>     <script src="~/scripts/angular-route.js"></script>     <script src="~/client/scripts/atthemovies.js"></script>     <script src="~/client/scripts/listcontroller.js"></script>     <script src="~/client/scripts/detailscontroller.js"></script> }  <div ng-app="atthemovies">     <ng-view></ng-view> </div> 

here list partial :

<div ng-controller="listcontroller ctrl">     <h1>{{ctrl.message}}</h1>     <h2>there {{ctrl.movies.length}} movies in database</h2>      <table>         <tr ng-repeat="movie in ctrl.movies">             <td>{{movie.title}}</td>             <td>                 <a ng-href="/#/details/{{movie.id}}" >details</a>             </td>         </tr>     </table> </div> 

here details partial:

<div ng-controller="detailscontroller ctrl2">     <h2>ctrl2.message</h2>     <h2>{{movie.title}}</h2>     <div>         released in {{movie.releaseyear}}     </div>         <div>         {{movie.runtime}} minutes long.     </div> </div> 

here javascript file create angular app:

(function () {     var app = angular.module("atthemovies", ["ngroute"]);      var config = function ($routeprovider) {          $routeprovider         .when("/list", { templateurl: "/client/views/list.html" })         .when("/details/:id", { templaturl: "/client/views/details.html" })         .otherwise(         { redirectto: "/list" });     };      app.config(config);  }()); 

here javascript file create list controller:

(function (app) {     app.controller("listcontroller", ['$http', function ($http) {         var ctrl = this;         ctrl.message = "hello world!";         ctrl.movies = [];         $http.get("/api/movie")         .success(function (data) {             ctrl.movies = data;         })         .error(function(status){             ctrl.message = status;         });     }]) }(angular.module("atthemovies"))); 

here javascript file create details controller:

(function (app) {     app.controller("detailscontroller", ['$routeparams', '$http', function ($routeparams, $http) {         var ctrl2 = this;         ctrl2.message = "";         ctrl2.movie = {};          var id = $routeparams.id;         $http.get("/api/movie/" + id)         .success(function(data){             ctrl2.movie = data;         }).error(function (status) {             ctrl2.message = status;         });     }]) }(angular.module("atthemovies"))); 

finally here webapi2 controller

public class moviecontroller : apicontroller {     private moviedb db = new moviedb();      // get: api/movie     public iqueryable<movie> getmovie()     {         return db.movies;     }      // get: api/movie/5     [responsetype(typeof(movie))]     public ihttpactionresult getmovie(int id)     {         movie movie = db.movies.find(id);         if (movie == null)         {             return notfound();         }          return ok(movie);     } 

you have typo in route config i.e. templaturl

.when("/details/:id", { templaturl: "/client/views/details.html" }) 

should

.when("/details/:id", { templateurl: "/client/views/details.html" })