title: AngularJS data grid, scroll element to top of enclosing div on click
body: <p>I have a SPA in Angular. I have a data grid of items. I'd like when an item in the grid is clicked for it to have a particular class applied to it, and then for that item to scroll to the top of the enclosing div.</p>
  
  <p>See Plunkr here: <a href="http://plnkr.co/edit/OSPJ5r3P9BHo8YKVtdTT?p=preview" rel="nofollow">http://plnkr.co/edit/OSPJ5r3P9BHo8YKVtdTT?p=preview</a></p>
  
  <p>I have the code that applies the class working, but I'm having trouble getting the active (element with class 'open' applied) to scroll to the top of the enclosing div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope) {
  
    $scope.cart = [];
  
    $scope.addToCart = function(index) {
      $scope.cart.push(index);
  
      $scope.cartCount = $scope.cart.length;
      alert($scope.cartCount);
    }
  
  
    $scope.activeRow = function(index) {
      $scope.selectedRow = index;
  
    }
  
  
    $scope.dataObject = [{
        "Number": "001",
        "Status": "NCB",
        "Compound": "CD19A"
      }, {
        "Number": "002",
        "Status": "NCA",
        "Compound": "CD19B"
      }, {
        "Number": "003",
        "Status": "NCR",
        "Compound": "CD33C"
      }, {
        "Number": "004",
        "Status": "NCX",
        "Compound": "CD33D"
      }, {
        "Number": "005",
        "Status": "NCT",
        "Compound": "CD33E"
      }, {
        "Number": "006",
        "Status": "NC9",
        "Compound": "CD20F"
      }, {
        "Number": "007",
        "Status": "NC8",
        "Compound": "CD20G"
      }, {
        "Number": "008",
        "Status": "NCX",
        "Compound": "CD20H"
      }, {
        "Number": "009",
        "Status": "NCY",
        "Compound": "CD33I"
      }, {
        "Number": "010",
        "Status": "NCT",
        "Compound": "CD33J"
      }
  
    ];
  
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Put your css in here */
  
  body {
    background: #eee;
  }
  
  div.cart {
    display: block;
    height: 70px;
    background: silver;
    margin-left: 20px;
    width: 200px;
    padding: 5px 10px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  
  .cart h1 {
    color: #fff;
    line-height: 20px;
  }
  
  .item-list-wrapper {
    height: 300px;
    width: 740px;
    border: 1px solid #ddd;
    overflow-y: scroll;
    margin-left: 20px;
  }
  
  .item-list {
    height: 70px;
    width: 100%;
    margin-bottom: 10px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid #fff;
    background: #efefe4;
  }
  
  li {
    display: inline-block;
    list-style: none;
    padding: 0 40px 40px 40px;
    font-size: 24px;
  }
  
  .open {
    height: 300px;
    background: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;AngularJS Plunker&lt;/title&gt;
    &lt;link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /&gt;
    &lt;script&gt;
      document.write('&lt;base href="' + document.location + '" /&gt;');
    &lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"&gt;&lt;/script&gt;
    &lt;script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl"&gt;
    &lt;div ng-view=""&gt;&lt;/div&gt;
    &lt;div class="cart"&gt;
      &lt;h1&gt;Cart: {{cartCount}}&lt;/h1&gt;&lt;/div&gt;
  
  
    &lt;div class="item-list-wrapper"&gt;
      &lt;div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}"&gt;
        &lt;ul&gt;
          &lt;li&gt;{{data.Number}}&lt;/li&gt;
          &lt;li&gt;{{data.Status}}&lt;/li&gt;
          &lt;li&gt;{{data.Compound}}&lt;/li&gt;
          &lt;li&gt;
            &lt;a href="" ng-click="addToCart()"&gt;Add to Cart&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--item-list-wrapper --&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>