Removing # Character cause app doesn't work correctly in Angular

I used index.html for master of my page and I have partial views with ng-view and $routeProvider. after I remove # character from the URL (with html5mode) my app doesn't work with URL ( except for default route ) . also open page as new tab returns 404 error. the app can not find index.html. everything works when I click a link in a browser

<!DOCTYPE html >
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!-- CSS File -->
<!-- JS File -->
<title></title>
</head>
<body>
  <div class="container" ng-controller="RootController">
  <!-- Header Of Page -->
  <div class="header">
    <a href="" class="header_logo">
      <img src="img/logo.png">
    </a>
    <a href="" class="header_name">
    </a>
    <a href="{{ link }}" class="header_signOut">
    </a>
  </div>
  <!-- Separator Line -->
  <div class="separator"></div>
  <!-- Rendered By AngularJS -->
  <div class="myClass" ng-view></div>
  <!-- Footer -->
  <div class="footer"></div>
  </div>
</body>
</html>

This is the routing

when('/', {
  controller: OperatorController,
  templateUrl: 'html/operator.html'
}).

when('/simReport', {
  controller: SimReportController,
  templateUrl: 'html/simReport.html'
}).

Solution

I had the same problem.

It happens because when you load the page directly, and not from a link inside your app, angular is not yet loaded and hence it is the server router that handle the request, and not angular's. If you are using a server to serve your angular app, you need to update its router so that any url that should be handled by angular, needs to be redirected to your index.html (so angular can load and do it's routing).

If you are using grunt/yeoman to load your angular app, I can edit my answer with more details