title: Add mousewheel scrolling to AngularJS list directive
body: <p>I am trying to implement a circular list in Angular, the basics of the directive are below and a <a href="http://plnkr.co/edit/U5ocXCoj6pmTxcOxru6C?p=preview" rel="nofollow">plunker here</a>. Essentially just a simple list that rotates around in either direction.</p>
  
  <p>I would like to add the ability to rotate the list based on mouse scrolling but I am unsure how to implement this in Angular (without JQuery), I tried but cannot even get a response from a mousewheel event on the element using something similar to <code>angular.element(element).bind('scroll', function () {...});</code></p>
  
  <p>Any help would be much appreciated. Cheers.</p>
  
  <pre><code>directives.directive('cl', function () {
  return {
      restrict: 'EA',
      replace: 'true',
      transclude: 'true',
      templateUrl: 'templates/clist.html',
      link: function (scope, element, attrs) {
          var lelems, lelem;
  
          scope.up = function () {
              lelems = element.find('li');
              lelem = angular.element(lelems[0]).remove();
              lelems.parent().append(lelem.clone());
          }
  
          scope.down = function () {
              lelems = element.find('li');
              lelem = angular.element(lelems[lelems.length - 1]).remove();
              lelems.parent().prepend(lelem.clone());
          }
      }
  }
  </code></pre>
  
  <p>});</p>