Angular 1.5 component demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="demoApp">
  <div id="scroll1" class="scrollContent" >
    <img src="//i.imgur.com/SeVko17.png"
      height="190">
    <img src="//i.imgur.com/vKP3TRO.png" 
     height="190"/>
    <img src="//i.imgur.com/mp4OQxw.png"
      height="90"
      width="90">
    <img src="//i.imgur.com/tajHpZB.png"
      height="190">
    <img src="//i.imgur.com/UOpCxzT.png"
      height="200">
  </div>
  <div id="scroll2" class="scrollContent" sync-scroll="scroll1">
    <img src="//i.imgur.com/L24JNPe.png"
      height="190">
    <img src="//i.imgur.com/YvKiPER.png" 
     height="190"/>
    <img src="//i.imgur.com/8yOdRbT.png"
      height="90"
      width="90">
    <img src="//i.imgur.com/gI7uvLJ.png"
      height="190">
    <img src="https://placekitten.com/200/200/"
      height="190">
  </div>
</div>

CSS

html, body {margin: 0; padding: 0;}

.scrollContent{
    width: auto;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    white-space: nowrap;
}

scrollContent img {
    border: 0;
}

JavaScript

(function() {
  "use strict";
  angular.module('demoApp', [])
    .directive('syncScroll', function() {
      return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          var scroller = angular.element(document.getElementById(attrs.syncScroll));
          scroller.bind('scroll', function() {
            element[0].scrollLeft = scroller[0].scrollLeft;
          });
        }
      };
    });
})();