Edit in JSFiddle

  window.ScrollCtrl = function($scope, $element, $timeout) {
    var consoleDiv$ = $element.find('#console');
    $scope.console = '';

    $timeout(function interval() {
      $scope.scrollTop = $element.find("#scroller").scrollTop();
      consoleDiv$.scrollTop(consoleDiv$.prop('scrollHeight'));
      $timeout(interval, 50);
    },50);
  }

  angular.module('demo', [])
      .directive('monitor', function() {
        return function(scope, elem) {
          function logging(msg) {
            scope.console += msg + '<br>';
          }

          elem.on('touchstart', function(e) {
            logging('<span class="r">touchstart</span>');
            scope.startX = e.originalEvent.touches[0].clientX;
            scope.startY = e.originalEvent.touches[0].clientY;
          });

          elem.on('touchmove', function(e) {
            logging('touchmove');
            scope.moveX = e.originalEvent.changedTouches[0].clientX;
            scope.moveY = e.originalEvent.changedTouches[0].clientY;
          });

          elem.on('touchend', function(e) {
            logging('<span class="b">touchend</span>');
            scope.endX = e.originalEvent.changedTouches[0].clientX;
            scope.endY = e.originalEvent.changedTouches[0].clientY;
          });

          elem.on('scroll', function(e) {
            logging('scroll');
          });
        };
      });

  angular.element(document).ready(function() {
    angular.bootstrap(document, ['demo'])
  });

<div id="contents" ng-controller="ScrollCtrl">
  <div id="info">
    scrollTop: {{scrollTop}}<br>
    touchstart.x: {{startX}}px, touchstart.y: {{startY}} px<br>
    touchmove.x: {{moveX}}px, touchmove.y: {{moveY}} px<br>
    touchend.x: {{endX}}px, touchend.y: {{endY}} px<br>
  </div>
  <div id="console" ng-bind-html-unsafe="console"></div>
  <ul id="scroller" monitor>
    <li>List 01</li>
    <li>List 02</li>
    <li>List 03</li>
    <li>List 04</li>
    <li>List 05</li>
    <li>List 06</li>
    <li>List 07</li>
    <li>List 08</li>
    <li>List 09</li>
    <li>List 10</li>
    <li>List 11</li>
    <li>List 12</li>
    <li>List 13</li>
    <li>List 14</li>
    <li>List 15</li>
    <li>List 16</li>
    <li>List 17</li>
    <li>List 18</li>
    <li>List 19</li>
    <li>List 20</li>
    <li>List 21</li>
    <li>List 22</li>
    <li>List 23</li>
    <li>List 24</li>
    <li>List 25</li>
    <li>List 26</li>
    <li>List 27</li>
    <li>List 28</li>
    <li>List 29</li>
    <li>List 30</li>
    <li>List 31</li>
    <li>List 32</li>
    <li>List 33</li>
    <li>List 34</li>
    <li>List 35</li>
    <li>List 36</li>
    <li>List 37</li>
    <li>List 38</li>
    <li>List 39</li>
    <li>List 40</li>
    <li>List 41</li>
    <li>List 42</li>
    <li>List 43</li>
    <li>List 44</li>
    <li>List 45</li>
    <li>List 46</li>
    <li>List 47</li>
    <li>List 48</li>
    <li>List 49</li>
    <li>List 50</li>
    <li>List 51</li>
    <li>List 52</li>
    <li>List 53</li>
    <li>List 54</li>
    <li>List 55</li>
    <li>List 56</li>
    <li>List 57</li>
    <li>List 58</li>
    <li>List 59</li>
    <li>List 60</li>
    <li>List 61</li>
    <li>List 62</li>
    <li>List 63</li>
    <li>List 64</li>
    <li>List 65</li>
    <li>List 66</li>
    <li>List 67</li>
    <li>List 68</li>
    <li>List 69</li>
    <li>List 70</li>
    <li>List 71</li>
    <li>List 72</li>
    <li>List 73</li>
    <li>List 74</li>
    <li>List 75</li>
    <li>List 76</li>
    <li>List 77</li>
    <li>List 78</li>
    <li>List 79</li>
    <li>List 80</li>
    <li>List 81</li>
    <li>List 82</li>
    <li>List 83</li>
    <li>List 84</li>
    <li>List 85</li>
    <li>List 86</li>
    <li>List 87</li>
    <li>List 88</li>
    <li>List 89</li>
    <li>List 90</li>
    <li>List 91</li>
    <li>List 92</li>
    <li>List 93</li>
    <li>List 94</li>
    <li>List 95</li>
    <li>List 96</li>
    <li>List 97</li>
    <li>List 98</li>
    <li>List 99</li>
  </ul>
</div>

#contents {
  height: 100%;
  width: 95%;
  position: absolute;
  padding: 10px;
}

#info {
  text-align: center;
  border: 1px solid #000;
  width: 90%;
  margin: 0 auto 20px;
  font-size: 25px;
  font-weight: bold;
}

#console {
  overflow: auto;
  border: 1px solid #000;
  width: 150px;
  height: 80%;
  float: right;
  font-size: 18px;
  -webkit-overflow-scrolling: touch;
  padding-left: 5px;
}

#console .b {
  color: blue;
}

#console .r {
  color: red;
}

ul {
  height: 80%;
  width: 70%;
  overflow: auto;
  font-size: 18px;
  margin: 0 auto;
  -webkit-padding-start: 0;
  border: 1px solid #000;
  -webkit-user-select: none;
}

li {
  list-style: none;
  height: 50px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  padding: 10px 15px;
  font-size: 20px;
}