Back button angularjs issue

Question

I have this routing code for my app

app.config(function ($routeProvider) {
            $routeProvider
                .when('',
                    {
                        controller:'competitionsController',
                        templateUrl:'competitions.html'
                    })
                .when ('/teams/',
                    {
                        controller:'teamsController',
                        templateUrl:'teams.html'
                    })
                .when('/squad/',
                    {
                        controller:'squadController',
                        templateUrl:'squad.html'
                    })
                .when('/player/',
                    {
                        controller:'playerController',
                        templateUrl:'player.html'
                    })
                .otherwise('');
        });

The order I display the information follows like that Competitions/Teams/squad/player

It works perfectly until I click in the navigator back button from squad or player pages, where it doesn't work well, it throws a "error loading pages" and it return to the competitions page. What I'm doing wrong?

You can check the behaviour of this here: http://balonmano100.p.ht/prueba/

Thanks

Answer 1

You're setting your url via the href attribute in your link tag. Try using ng-click and the $location object to set the browser's url.

<div ng-controller="myCtrl">
    <a href="#" ng-click="goTo('myUrlPart')">My Link</a>
</div>

Then in your controller

angular.module('myApp',[])
    .controller('myCtrl',['$scope','$location',function($scope,$location){
        $scope.goTo = function(url){
            $location.path(url);
        }; // end goTo
    }]); // end myCtrl / myApp