title: Disable UI-Router Interaction with window.location
body: <p>This is a long shot, but UI-router is so popular, thought maybe someone here would have insight on this issue.</p>
  
  <p>I'm migrating a project to Angular JS. The project consists of a page with several different panels - each of which is downloaded from the server as HTML with AJAX, injected into the page with Javascript, and associated with its own href, which managed by <a href="https://github.com/balupton/jquery-history/blob/master/scripts/jquery.history.js" rel="nofollow">jQuery History</a>.</p>
  
  <p>jQuery history tracked the browser states and updated the window.href accordingly after each panel was injected with Javascript. For instance:</p>
  
  <pre><code>Panel 1:
    window.location.href // http://myapp.com/panel1
    History.getLocationHref() // http://myapp.com/panel1
    History.getPageUrl() // http://myapp.com/panel1
  Panel 2:
    window.location.href // http://myapp.com/panel2
    History.getLocationHref() // http://myapp.com/panel2
    History.getPageUrl() // http://myapp.com/panel2
  Panel 3:
    window.location.href // http://myapp.com/panel3
    History.getLocationHref() // http://myapp.com/panel3
    History.getPageUrl() // http://myapp.com/panel3
  </code></pre>
  
  <p>etc, etc.</p>
  
  <p>Because each of these panels are injected, rather than compiling them with Angular after injection into the DOM, I'm bootstrapping separate AngularJs Apps for each of them. This has worked fine up until now.</p>
  
  <p>Now I'm using AngularJs UI-router in Panel 2 - so I can render data in alternative templates. The problem is, UI-Router must somehow mess with browser history and/or window href. Because once that app is instantiated, let's say I start at Panel 1, then click Panel 2, then click Panel 3, I have this problem:</p>
  
  <pre><code>Panel 1:
    window.location.href // http://myapp.com/panel1
    History.getLocationHref() // http://myapp.com/panel1
    History.getPageUrl() // http://myapp.com/panel1
  Panel 2:
    window.location.href // http://myapp.com/panel2
    History.getLocationHref() // http://myapp.com/panel2
    History.getPageUrl() // http://myapp.com/panel2
  Panel 3:
    window.location.href // http://myapp.com/panel2
    History.getLocationHref() // http://myapp.com/panel2
    History.getPageUrl() // http://myapp.com/panel3
  </code></pre>
  
  <p><em>basically, once UI-Router is instantiated with an app, jQuery History no longer works, and the location href persists at the URL of the ui-router app.</em></p>
  
  <p><strong><em>Is there anything I can do to disable ui-router's interaction with the window's location href? Or is integral to how the module works?</em></strong></p>
  
  <p>Here's my panel2.states.js file if it helps:</p>
  
  <pre><code>angular.module("panel2")
  .config(["$stateProvider", function($stateProvider) {
    $stateProvider
      .state('table', {
        views: {
          index: {
   //             controller: "TableController as at",
              templateUrl: "table.html"
          }
        }
      })
      .state('tiles', {
        views: {
          index: {
  //              controller: "TilesController as tc",
              templateUrl: "tiles.html"
          }
        }
      });
  }]);
  </code></pre>
  
  <h3>Update (4/27/2015)</h3>
  
  <p>I solved my particular issue by just getting rid of jQuery History and the features it adds beyond what we need. Instead I just interact directly with <code>window.history</code>:</p>
  
  <pre><code> window.history.pushState({panel: "panel3"}, 
      document.title + " | " + 'panel3', 
      window.location.href + "/panel3");
  </code></pre>
  
  <p>I'm still curious as to what was causing this interaction and if angular or angular ui-router directly interacts with window.location?</p>