angular js browser back button dosn't work when routing

Question

i have this routing code on my app:

var app = angular.module('docFinder', [])

app.config(function($routeProvider){
    $routeProvider.
      when('/', 
      {            
        controller: docTable,
        templateUrl: 'partials/finder.html'
      }).
      when('bio/:finderId', 
      {          
        controller: bioCtrl,
        templateUrl: 'partials/bio.html'
      }).
      otherwise({redirectTo: '/'});
});

when i start my app and go to root y click on a link to the second route

once i get there i hit the back button on my browser and it dosn't goes back it only refreshes my current page, any ideas on the problem?

EDIT:

Solution

<tr ng-repeat="doc in providers" ng-mouseover="mouseOverDoc(doc)" ng-mouseleave="mouseLeave()">      
   <td><a href="#bio/{{doc.provider.Id}}"> {{doc.provider.FirstName}} </a></td>

</tr>

Answer 1

Use #/ on link. it seems bug on angular js. for example:

 <td><a href="#/bio/{{doc.provider.Id}}"> {{doc.provider.FirstName}} </a></td>

Answer 2

It doesn't seem to be a bug to me.

AngularJS provides two configuration modes for $location service to control the format of the URL in the browser's address bar.

1. Hashbang Mode (#!)
2. HTML5 Mode

This can be resolved if you set the configuration to HTML5 Mode using { html5Mode: true }.