title: Angular JS Scrolling to an element in another page
body: <p>I am building a SPA using Angular 1.4 and Grails. In my home page I have 3 sections namely section1, section2 and section3 with the same ID. I have a dropdown menu on the top and I have used the scroll-to plugin to scroll to the respective sections on click. </p>
  
  <pre><code>&lt;li &gt;&lt;a href scroll-to="section1"&gt;History&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>My Problem is that when I move to another route, the dropdown menu will still be at the top and I am not sure how to get this to scroll to that element in the home route from another route. This is what I have tried. </p>
  
  <pre><code>&lt;li &gt;&lt;a href="#/home/section4"&gt;Economic Weight&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>And in the route config I did this</p>
  
  <pre><code>      when('/home/:section', {
          templateUrl: '/euribron/js/app/templates/home.html',
          controller: 'HomeController'
        }).
  </code></pre>
  
  <p>and in controller I did this</p>
  
  <pre><code>    if($routeParams.section) {      
          var element = document.getElementById($routeParams.section);
          smoothScroll(element);
      }
  </code></pre>
  
  <p>But this does not work when I am on the same route and it does not seem elegant. Is there an easier way to achieve this in an efficient way. </p>