$routeProvider not working in angular - angularjs

Question

this is my app.js
var cricketapp = angular.module('cricketapp', ['ngCookies']).
config(['$routeProvider', function($routeProvider, $httpProvider, $cookies){
$routeProvider.
when('/', {
templateUrl: '/partials/games-pending-entry.html',
controller: HomeCtrl
}).
when('game/:gameId',{
templateUrl: 'partials/shortlist.html',
controller: ShortlistCtrl
}).
otherwise({redirectTo: '/'});
//$httpProvider.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
}]);
and controllers.js
function HomeCtrl($scope, $http){
$http.get('/api/games-pending-entry').success(function(data){
$scope.games_pending_entry = data;
});
}
function ShortlistCtrl($scope, $http, $routeParams){
$scope.gameId = $routeParams.gameId;
$http.get('api/get-players').success(function(data){
$scope.players = data;
})
}
and in my html, i am calling the link as
<a class='btn btn-warning' href='#/game/{{ game.id }}'>Enter Shortlist</a>
when i click on this link, i am redirected back to /#/
where am i going wrong?

Answer 1

Your $routeProvider rules are wrong:
when('game/:gameId',{
should become
when('/game/:gameId',{
As the route isn't recognized, it redirects to '/'. Changing that will most likely solve the problem.
Also, you may find ngHref useful, to avoid having links broken, before the {{model}} bindings resolved: http://docs.angularjs.org/api/ng.directive:ngHref