title: Angular ui-router disable autoscroll to fix flickering
body: <p>I have a top route that has a route param:</p>
  
  <pre><code>$stateProvider.state('dashboard', {
    abstract: true,
    url: '/:name',
    templateUrl: 'modules/dashboard/views/dashboard.html',
    controller: DashboardController,
    controllerAs: 'dashboard',
    resolve: {
      product: ['$stateParams', 'store', function($stateParams, store) {
        return store.findWhere({name: $stateParams.name});
      }]
    }
  });
  </code></pre>
  
  <p>The <code>:name</code> param changes when a select dropdown item is selected. On change I trigger the following:</p>
  
  <pre><code>this.handleSelected = function(product) {
    $state.go($state.current.name, {name: product.name});
  };
  </code></pre>
  
  <p>Then the children route fills in the views of the main route (just one for this example):</p>
  
  <pre><code>$stateProvider.state('dashboard.main', {
    url: '',
    views: {
      '': {
        templateUrl: 'modules/main/views/main.html',
        controller: MainController,
        controllerAs: 'main'
      }
    }
  });
  </code></pre>
  
  <p>In <code>dashboard.html</code> the select dropdown directive takes a <code>selectedProduct</code> property where I pass the current <code>:name</code>, like:</p>
  
  <pre><code>&lt;dropdown-products selected-product="{{$stateParams.name}}"&gt;&lt;/dropdown-products&gt;
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>What happens is that whenever I select a product from the dropdown, the page flickers, it scrolls down real quick to the end of the loaded view, and then scrolls up again creating a visible flickering. I want to avoid this. This happens when setting <code>autoscroll=true</code> in the <code>ui-view</code>. When setting it to <code>false</code> it just scrolls down but not up. What I want to do is disable this behavior completely; I don't want it to scroll at all.</p>
  
  <p>I found out that if I pass the <code>:name</code> param to the children routes and resolve the product in there, then it doesn't cause the flickering:</p>
  
  <pre><code>$stateProvider.state('dashboard', {
    abstract: true,
    url: '/',
    ...
  });
  
  $stateProvider.state('dashboard.main', {
    url: ':name',
    resolve: {
      product: ...
    }
  });
  </code></pre>
  
  <p>But then the select menu doesn't show the selected option when going to the URL manually, because the param is in the children routes, not the parent route, plus resolving the product in every route seems counter-intuitive, I want it to come from the top route so it is only resolved once.</p>
  
  <p>I also tried using the default <code>$anchorScrollProvider</code> and disable it like in <a href="https://stackoverflow.com/questions/14530572/angularjs-how-to-disable-auto-scroll-to-top-of-my-page">this solution</a>, but no luck so far. Any ideas?</p>