AngularJS - Scroll div container when clicking on item in different div - angularjs

Question

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.
Problem: I'm trying to scroll the right panel to the corresponding section when clicking on the menu item from the navigation panel.
I am doing it with anchorScroll() and locator.hash() functions. It works, but it scrolls the whole page (navigation and content).
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.
Then, from the child scope, I am watching that variable, performing the scroll with
html:
html:
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel"ng-controller="contentHelpController" >
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in list">
<div id="{{some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</div>
</li>
</ul>
</div>
</div>
js:
Scope parent:
$scope.setCurrentItem = function (currentItemID){
$scope.currentItemID = currentItemID;
}
Scope child:
$scope.$watch('currentItemID', function (divDestinyID) {
$location.hash(divDestinyID);
$anchorScroll();
});
The problem is that the whole page is scrolled.
Any idea ?
Thank you!

Answer 1

A possible solution is to make your "child" into a directive. That way, you can scroll on the element, rather than the entire page
content-help.directive.js
angular
.module('appModule')
.directive('contentHelp', contentHelp);
function contentHelp() {
var directive = {
bindToController: true,
controller: ContentHelpController,
controllerAs: 'vm',
restrict: 'EA',
scope: {
list: '=',
currentItemId: '='
},
templateUrl: 'contentPanel.html'
};
return directive;
}
ContentHelpController.$inject = ['$scope', '$element'];
/* #ngInject */
function ContentHelpController ($scope, $element) {
var vm = this;
$scope.$watch(function() {
return vm.currentItemId;
}, onIdChange);
////
function onIdChange(newId) {
if(newId) {
var idElement = $element.find('#' + newId);
$element.animate({
scrollTop: idElement.offset().top
});
}
}
}
contentPanel.html
<div id="scrollablePanel">
<!-- List of help elements -->
<ul>
<li ng-repeat="some in vm.list">
<div id="{{::some.title}}" style="margin-top: 3px; padding: 10px; border: 1px solid lightGrey;">
...
</div>
</li>
</ul>
</div>
html
<!-- Navigation Panel -->
<div id="helpNavigatorPanel">
<ul>
<li ng-repeat="(value, item) in list" ng-click="setCurrentItem (item.title)">
<a style="helpNavigationItems" href="#">{{item.title}}</a>
</li>
</ul>
</div>
<div id="helpContentPanel" ng-controller="contentHelpController">
<content-help list="list" current-item-id="currentItemId"></content-help>
</div>