title: Scroll to top of div in AngularJS?
body: <p>I am using AngularJS for a small web app and have encountered a problem. I am using <code>ng-repeat</code> to populate a list inside of a div. The div has a fixed height and is set to <code>overflow-y: auto</code>, meaning a scroll bar appears when the list is too big for the div. My problem is that when the list gets re-drawn, i.e. the data backing ng-repeat changes, the scroll bar does not reset to the top of the div. Instead, it stays at whatever position the scroll bar was at before the ng-repeat change. This is a very poor user experience. I've tried the following without any luck:</p>
  
  <pre><code>&lt;div id="myList"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="item in items"&gt;{{item}}&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;a ng-click="switchItems()"&gt;Switch&lt;/a&gt;
  
  &lt;script&gt;
  function MyApp($scope) {
    $scope.switchItems = function() {
      $('#myList').scrollTop();
      $scope.items = [1, 2, 3, 4]; // new items
    };
  }
  &lt;/script&gt;
  </code></pre>