Angular $location doesn't work

Question

I created a plunkr for this code and it can be viewed here:

The problem is very simple. I am trying to create a master/details scenario. So there are two templates: listings and details. In the listing controller there is a methods redirects to the detials route. This method works well as i verified it with the debugger (via breaking point).

 $scope.goToDetails = function(propItem) {
  //$rootScope.currentProperty = propItem;
  $location.path('/details/');

}

The 'details' path (see blow) calls the 'detailsController', which is currently (for testing purposes) defined as:

 var detailsController = function($scope, $http, $routeParams, $rootScope) {
    var dosomething = "do";
 };

I verified with the debugger that the execution indeed reaches the "dosomething" command and that the route changes in the browser to "details". However, and HERE is the problem, when I continue with the debugger, angular changes the route back to the default route. I went over the definitions but nothing that i did seems wrong.Any ideas?

Here is how I defined the routes:

app.config(function($routeProvider) {
$routeProvider
  .when('/main/', routes.main)
  .when('/details/', routes.details)
  .otherwise({
    redirectTo: '/main'
  });
});

var routes = {
  main: {
  templateUrl: 'PropertiesResults.html',
  controller: 'listingController'
},
details: {
  templateUrl: 'property-detail.html',
  controller: 'detailsController'
 },
}

Answer 1

Replace:

<a href="#" ng-click="goToDetails(property)" ...

With:

<a href="" ng-click="goToDetails(property)" ...

Or it will go to your otherwise route.