title: Angular JS deep-link and browser refresh
body: <p>I am building an angular-js based single-page solution. I thought my deep-linking was working, forward and back browser history works fine.  But if I refresh (F5) the single record page... bootstrap and angular don't seem to load and the page displays incorrectly.
  So I am expecting /owners to provide a list and /owners/XYZ to provide the XYZ single owner record.  </p>
  
  <p>The error I receive indicates Chrome is not interpreting this as html - failing on the first css link... but it is deep-linking - when using the browsers history ok. When I refresh I get the error ->>
      Resource interpreted as Stylesheet but transferred with MIME type text/html: "<a href="http://myfakedomain.com/owners/css/bootstrap.css" rel="nofollow">http://myfakedomain.com/owners/css/bootstrap.css</a>". </p>
  
  <p>Ok the code - Here I hook up the routeProvider:</p>
  
  <pre class="lang-js prettyprint-override"><code>.config(['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix("!");
  $routeProvider
      .when('/owners', {templateUrl: '/partials/owner-list.html',  controller:OwnerListCtrl})
      .when('/owners/:name', {templateUrl: '/partials/owner-details.html',   controller:OwnerCtrl})
       .when('/', {templateUrl:'/partials/home.html', controller:HomeCtrl})
      .otherwise({redirectTo:'/home'});
  }]);
  </code></pre>
  
  <p>2 simple controllers that are relevant here... the backend is a factory service for retrieval from a RESTful webservice.</p>
  
  <pre class="lang-js prettyprint-override"><code>function OwnerListCtrl($scope, $routeParams, backend) {
  var ug = $( "#ug" ).html();
  var mydata = null;
  
  // load the params coming from the UI
  if (($routeParams != null)&amp;&amp; ($routeParams.nm != null))
      mydata = $routeParams.nm;
  else{
      // in case we get here directly - ensure only super users
      // will access other owner entities
      if (ug != SUPERUSER)
          mydata = $( "#on" ).html();     
  }
  backend.owners(mydata).then(function (result){
          $scope.owners = result.data.data;
  });
  $scope.orderProp = 'name';
  }
  </code></pre>
  
  <p>And the single record controller...</p>
  
  <pre class="lang-js prettyprint-override"><code>function OwnerCtrl($scope, $routeParams, $http, backend,$log, $location){
      // populate the companys select dropdown
      $scope.companys=function(){
          backend.companys().then(function (response){
              $scope.companies = response.data.data;
          })
      }
      if (($routeParams == null) &amp;&amp; ($routeParams.name == null)){
          var ug = $( "#ug" ).html();
          var myParam = null;
  
          if (ug != SUPERUSER)
              myParam = $( "#on" ).html();
  
          backend.owners(myParam).then(function (result){
              $scope.owner = result.data.data[0];
              $scope.companys();
          });
      }else{
          backend.owners($routeParams.name).then(function (result){
              $scope.owner = result.data.data[0];
              $scope.companys();
              $log.info($location.url());
          });     
      }
  
  }
  </code></pre>
  
  <p>Any insights would be welcomed.</p>