Nothing happens when Angular Href is clicked

Question

I am using Angular Routing with a webapi 2 controller.

Although the default path loads with the correct data, when I click on an item in a list containing a link to a details page, no data is loaded.

The browser shows what I believe to be the correct url (http://localhost:xxxxx/#/details/2) but the DetailsController script file is not called and no method on the webapi2 controller is called.

Here is my 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 is the list partial :

<div ng-controller="ListController as ctrl">
    <h1>{{ctrl.message}}</h1>
    <h2>There are {{ctrl.movies.length}} Movies in the 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 is the details partial:

<div ng-controller="DetailsController as ctrl2">
    <h2>ctrl2.message</h2>
    <h2>{{movie.Title}}</h2>
    <div>
        Released in {{movie.ReleaseYear}}
    </div>    
    <div>
        {{movie.Runtime}} minutes long.
    </div>
</div>

Here is the javascript file to create the 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 is the javascript file to create the 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 is the javascript file to create the 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 is the 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);
    }

Answer 1

You have a typo in your route config i.e. templatUrl

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

should be

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