AngularJS drag and drop with automatic scrolling - angularjs

Question

I have an array of filters. Each filter can be a single filter or an array of filters (not recursive, stops with the first level).
I want to display it in a ribbon and allow dragging a filter on top of another, making that filter be added to the array of the other filter.
Only 3 filters will be able to show at once and you can reach others by scrolling horizontally.
I want to be able to automatically scroll while dragging if reached the right/left edge.
There are plenty of ways to implement drag and drop but I'm afraid I'll be in a ditch when I try to add automatic scrolling to them.
How would you suggest going about this? Where do I start? Is there some library that giving me one of my two needs, the second will be easy to implement?
I've tried illustrating what I mean in a pic. Excuse my none existant PS skills and my poor mspaint skills. Dragging a filter X on filter Y will remove X and create an array in the place of Y consisting of X and Y.
Thanks

Answer 1

This may be helpful It is working in my case.If you have better solution please share.
I have used ngDraggable for drag and drop and on ng-drag-move event call following function like ng-drag-move="dragContainer($event)"
$scope.dragContainer=function(ev){
var scrollPostion=$('#sasha').scrollLeft();
console.log(scrollPostion);
if(ev.tx>0)
{
$('#sasha').scrollLeft(scrollPostion+1);
}
else
{
$('#sasha').scrollLeft(scrollPostion-1);
}
console.log('dragging');
}
where sasha is div Id on which you want to add scroll bar