Example of scrolling to selected item.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Example </title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
  <script data-require="angular.js@1.3.20" data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js"></script>
  <script src="app.js"></script>
  <script src="exampleController.js"></script>
  <script src="exampleDirective.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body ng-app="app">
  
  <div class="container" ng-controller="ExampleController as exampleVm">
    <h1>List of elements in grid</h1>
    <div class="col s7">

      <ul class="collection with-header">
        <li class="collection-header row">
          <div class="col s3">id</div>
          <div class="col s3">Name</div>
          <div class="col s3">Last Name</div>
          <div class="col s3">Age</div>
        </li>
        <div class="list-scroll">
          <li class="collection-item row" ng-class="person.select?'active':''" ng-repeat="person in exampleVm.list">
            <div class="col s3">{{person.index}}</div>
            <div class="col s3">{{person.name}}</div>
            <div class="col s3">{{person.last}}</div>
            <div class="col s3">{{person.age}}</div>
          </li>
        </div>
      </ul>

      <div class="input-field col s12">
        <select class="browser-default" ng-model="exampleVm.row" ng-options="item as item.index for item in exampleVm.list">
          <option value="">Select a row To scroll</option>
        </select>
        <button class="waves-effect waves-light btn" ng-click="exampleVm.view()"> 
          select row {{exampleVm.row.index}}
        </button>
      </div>

    </div>
  </div>

</body>

</html>

/* Styles go here */

.list-scroll{
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  list-style:none;
  padding:0;
}


.active{
  background: #546783;
  color:#fff;
}

(function() {
  'use strict';
   angular.module('app', [])
})();

(function() {
  'use strict';
    angular.module('app')
    .controller("ExampleController", ExampleController);

  function ExampleController() {
    var vm = this;
    vm.row;
    
    vm.view = view;
    
    
    function view(){
      vm.row.select = true;
    }
    
    vm.list = [{
      "index": 0,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 21,
      "name": "Guzman",
      "last": "Sharpe"
    }, {
      "index": 1,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 29,
      "name": "Carolyn",
      "last": "Barrera"
    }, {
      "index": 2,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 37,
      "name": "Hanson",
      "last": "Molina"
    }, {
      "index": 3,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 24,
      "name": "Park",
      "last": "Golden"
    }, {
      "index": 4,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 35,
      "name": "Ola",
      "last": "Shaw"
    }, {
      "index": 5,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 31,
      "name": "Koch",
      "last": "Hamilton"
    }, {
      "index": 6,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 26,
      "name": "Goodwin",
      "last": "Burton"
    }, {
      "index": 7,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 38,
      "name": "Angie",
      "last": "Gray"
    }, {
      "index": 8,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 39,
      "name": "Waters",
      "last": "Pate"
    }, {
      "index": 9,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 38,
      "name": "Evelyn",
      "last": "Guthrie"
    }, {
      "index": 10,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 34,
      "name": "Mcleod",
      "last": "Carson"
    }, {
      "index": 11,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 37,
      "name": "Hunt",
      "last": "Bates"
    }, {
      "index": 12,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 33,
      "name": "Haley",
      "last": "Stein"
    }, {
      "index": 13,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 25,
      "name": "Kelly",
      "last": "Erickson"
    }, {
      "index": 14,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 36,
      "name": "Mcclain",
      "last": "Gonzales"
    }, {
      "index": 15,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 33,
      "name": "Ina",
      "last": "Salazar"
    }, {
      "index": 16,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 25,
      "name": "Logan",
      "last": "Lyons"
    }, {
      "index": 17,
      "isActive": false,
      "picture": "http://placehold.it/32x32",
      "age": 34,
      "name": "Gaines",
      "last": "Compton"
    }, {
      "index": 18,
      "isActive": true,
      "picture": "http://placehold.it/32x32",
      "age": 27,
      "name": "Myra",
      "last": "Kennedy"
    }];
  }


})();

(function() {
  'use strict';
  
  function active($timeout) {
    var directive = {
      restrict: 'C',
      link: link
    };

    function link(scope, element, attrs) {
      scope.$watch('person.select', function(){
        element[0].parentElement.scrollTop = element[0].offsetTop - element[0].offsetHeight - element[0].parentElement.offsetTop;
      });
    }
    return directive;
  }

  active.$inject = ['$timeout'];
  angular.module('app')
    .directive("row", active);
})();