title: $anchorScroll and $location only work after second try
body: <p>I am trying to use <code>$anchorScroll</code> and <code>$location.hash()</code> to scroll to a <code>div</code>. I have a bottom on the top of the page. When I click the bottom, I want the page to scroll down to the bottom of the page where I have a <code>&lt;div id=&quot;target&quot;&gt;</code>.</p>
  <p>For some reason, the first time I click the button, my page doesn't scroll. If a click a second time, the page does scroll. And afterwards the scrolling works fine. This weird behavior can be reproduced if I refresh my page.</p>
  <p>I have this code in my controller:</p>
  <pre><code>$scope.scrolldown = function() {
    $location.hash('target');
    $anchorScroll();
  }
  </code></pre>
  <p>I know that the <code>$location.hash('target')</code> line is supposed to append a hash value to the end of my URL.</p>
  <p>Here's the URL when my page first got loaded:</p>
  <pre><code>http://run.plnkr.co/iqvdGjdeCP4idP4D/
  </code></pre>
  <p>After I clicked my button for the 1st time, it becomes:</p>
  <pre><code>http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target
  </code></pre>
  <p>which was not right (and the page was not scrolling properly).</p>
  <p>After I clicked my button for the 2nd time, it becomes:</p>
  <pre><code>http://run.plnkr.co/iqvdGjdeCP4idP4D/#/target#target
  </code></pre>
  <p>From this point on the page started to scroll properly, but the URL still looks very strange to me -- why would I want two hash values?</p>
  <p>I want to know why the button only works after second click and how to correct it.</p>
  <h1>Update</h1>
  <p>I added routing to my code and the scroll is working fine now.
  Here's <a href="http://plnkr.co/edit/KRC9Ou?p=preview" rel="nofollow noreferrer"> my plunker demo with routing.</a></p>