title: AngularJS - Scroll div container when clicking on item in different div
body: <p>Context: I have a left-menu (navigator) and right-panel (content) divs. Every item from the navigator is linked to the ID of its section in the right-panel.</p>
  
  <p>Problem: I'm trying to scroll the right panel to the corresponding section when clicking on the menu item from the navigation panel. </p>
  
  <p>I am doing it with <strong>anchorScroll()</strong> and <strong>locator.hash()</strong> functions. It works, but it scrolls the whole page (navigation and content).</p>
  
  <p>I have created two controllers: One for the parent (including the navigator) and other for the container (the one I want to scroll). When I click in the item from the menu, I am changing a variable within the scope.</p>
  
  <p>Then, from the child scope, I am watching that variable, performing the scroll with </p>
  
  <p>html:</p>
  
  <pre><code>html:
  
  &lt;!-- Navigation Panel --&gt;
  &lt;div id="helpNavigatorPanel"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)"&gt;
          &lt;a style="helpNavigationItems" href="#"&gt;{{item.title}}&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
   &lt;div id="helpContentPanel"ng-controller="contentHelpController" &gt;
  
      &lt;div id="scrollablePanel"&gt;
        &lt;!-- List of help elements --&gt;   
        &lt;ul&gt;
          &lt;li ng-repeat="some in list"&gt;
            &lt;div id="{{some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;"&gt;
               ...
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;      
      &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <p>Scope parent:</p>
  
  <pre><code> $scope.setCurrentItem = function (currentItemID){
                    $scope.currentItemID = currentItemID;
                  }
  </code></pre>
  
  <p>Scope child:</p>
  
  <pre><code>$scope.$watch('currentItemID', function (divDestinyID) {
                      $location.hash(divDestinyID);
                      $anchorScroll();
                  });
  </code></pre>
  
  <p>The problem is that the whole page is scrolled.</p>
  
  <p>Any idea ?</p>
  
  <p>Thank you!</p>