title: How to scroll a div to left using AngularJS
body: <p>I have a div like below:</p>
  
  <pre><code>&lt;div class="col-xs-1 scroll-button"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt; &lt;/div&gt;
  &lt;div class="customer-ust-bant col-xs-22" id="letters"&gt;
      &lt;box ng-repeat="lt in alph" name="{{lt}}" id="{{lt}}"&gt;&lt;/box&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-1 scroll-button" ng-click="gotoBottom()"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt; &lt;/div&gt;
  </code></pre>
  
  <p>and box template:</p>
  
  <pre><code>&lt;div class="alphabet-kutu"&gt;{{name|uppercase}}&lt;/div&gt;
  </code></pre>
  
  <p>and the directive:</p>
  
  <pre><code>app.directive("box", function() {
  return {
      restrict:"E",
      scope:{
          name:"@"
      },
      templateUrl:"/static/templates/customers/box.html",
      link:function(scope,elem,attrs,ctrl) {
  
      }
    };
  })
  </code></pre>
  
  <p>As you see I have div containing letters in alphabet and styled in horizontal scroll.</p>
  
  <p>When a button is clicked i want to scroll this div to left.</p>
  
  <pre><code> $scope.gotoBottom = function (){
  var element = angular.element( document.querySelector( '#letters' ) );
      element.animate({scrollLeft: element.offset().left}, "slow");
      //element.scrollLeft(100);
  
  };
  </code></pre>
  
  <p>I tried animate and scrollLeft functions. But I did not do any good. Is there a special function in AngularJS for this situations? How do I scroll a div to left using jQuery?</p>