<!DOCTYPE html>
<html ng-app="ccTable">

<head>
  <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  {{name}}

  <table class="table">
    <thead>
      <tr style="display:block; width:100%">
        <th class="id_area">#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody id='content-area' class="table_body" cc-row-selector collection="data" selected-row="selectedRow">
      <tr ng-repeat="item in data" ng-class="{'selected':$index == selectedRow}" ng-click="rowSelect($index)">
        <th scope="row" class="id_area">{{$index}}</th>
        <td>{{item.fname}}</td>
        <td>{{item.lname}}</td>
        <td>{{item.uname}}</td>
      </tr>

    </tbody>
  </table>
</body>

</html>
// Code goes here

var app = angular.module('ccTable', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj = {};


  $scope.data = [];

  for (var x = 0; x < 20; x++) {
    var myobj = {};
    myobj.fname = "FName " + x;
    myobj.lname = "LName " + x;
    myobj.uname = "UName " + x;
    $scope.data.push(myobj);
  }


  $scope.selectedRow = 0;

  $scope.rowSelect = function(index) {
    $scope.selectedRow = index;
  }



});

app.directive('ccRowSelector', ['$document', function($document) {
  return {
    restrict: 'A',
    scope: {
      collection: '=',
      selectedRow: '='
    },
    link: function(scope, elem, attrs, ctrl) {
      var elemFocus = false;
      elem.on('mouseenter', function() {
        elemFocus = true;
      });
      elem.on('mouseleave', function() {
        elemFocus = false;
      });
      $document.bind('keydown', function(e) {
        // var myElement = angular.element( document.querySelector( '#xx' ) );
        // var topPos = myElement[0].offsetTop;

        if (elemFocus) {
          if (e.keyCode == 38) {
            if (scope.selectedRow === 0) {
              return;
            }
            scope.selectedRow--;
            scope.$apply();
            focusSelectedRow();
            e.preventDefault();
          }
          if (e.keyCode == 40) {
            if (scope.selectedRow == scope.collection.length - 1) {
              return;
            }

            scope.selectedRow++;
            scope.$apply();
            focusSelectedRow();
            e.preventDefault();
          }
        }
      });

      function focusSelectedRow() {
        var selectedElement = angular.element(document.getElementsByClassName('selected'));
        var pos = selectedElement[0].offsetTop + 400;

        $("#content-area").scrollTop(pos);
      }
    }
  };
}])

// app.component('myComponent', {
//   bindings: {
//     obj: '<'
//   },
//   controller: function MyComponentCtrl() {
//     this.$onChanges = function(changesObj) {
//       console.log('Change', changesObj);
//     }
//   }
// });

// app.component('myComponentx', {
//   bindings: {
//     obj: '<'
//   },
//   controller: function MyComponentCtrlx() {
//     this.$onChanges = function(changesObj) {
//       undefinedFn();
//     }
//   }
// });
/* Styles go here */

.table_body{
  display:block;
  height:100px;
  overflow-y: auto;
  width:100%;
}

.id_area{
  width:2%;
}


.selected {
    background-color:red;
}


.table td, .table th {
    padding: 3px;
}