title: Angular RouteProvider redirect to another html file
body: <p>I have to build an app for an existing website, but unfortunately the website (outside of my control) detects the user device and redirects to a mobile version.</p>
  
  <p>I am trying to reuse the same js file but different html files.</p>
  
  <p>So I have:</p>
  
  <ol>
  <li>index.html for desktop</li>
  <li>mobile.html for mobile</li>
  </ol>
  
  <p>both call init.js where I want to handle my logic, my problem is that for some reason the routing is not working as I expected and I cannot figure out why.</p>
  
  <p>Desktop:</p>
  
  <ol>
  <li>I go to example.com</li>
  <li>get redirect to example.com/#/steps/age/0</li>
  <li>Refresh the page and it stays in example.com/#/steps/age/0</li>
  </ol>
  
  <p>This works as expected</p>
  
  <p>Mobile:</p>
  
  <ol>
  <li>I go to example.com/mobile.html</li>
  <li>get redirect to example.com/mobile.html#/steps/age/0</li>
  <li>Refresh the page and instead of staying in the same url, it goes to example.com/steps/age/0#/steps/age/0</li>
  </ol>
  
  <p>This does not work as expected (expected to stay in the same url once refreshing as in the step number 2)</p>
  
  <p>Code below:</p>
  
  <pre><code>angular
  .module('profileToolApp', ["ngRoute", "ngResource", "ngSanitize"])
  .config(function($routeProvider, $locationProvider){
      $routeProvider
      .when('/steps/:steps*', {
          templateUrl : 'profile-app.html',
          controller : 'example'
      })
      .otherwise({
          redirectTo: '/steps/age/0'
      });
  })
  .controller('example', function($scope, $routeParams, $resource, $location){
      console.log("example controller");
  });
  </code></pre>
  
  <p>Can anyone please advise?
  Thanks.</p>