title: Angular + jQuery, trigger scroll when src of image changes
body: <p>I am trying to use jQuery to scroll to a particular thumbnail (inside a modal) when right/left arrows have been pressed (modal should pop up when user clicks on a image). I was able to make the scroll working when user clicks on a thumbnail but I could not trigger a click when variable <em>current2</em> changes. Any help would be appreciated.</p>
  
  <p>I am new in Angular.js so if there are  other suggestions to improve the code, it would be appreciated.</p>
  
  <p><strong><a href="https://jsbin.com/yibeqa/edit?html,output" rel="nofollow noreferrer">jsbin link</a></strong></p>
  
  <pre><code>&lt;body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl"&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="small-8 columns"&gt;
              &lt;div class="small-3 columns"&gt;
                  &lt;div ng-repeat="obj in array"&gt;
                      &lt;div ng-if="$index &lt; 4"&gt;
                          &lt;img ng-click="changeMainMedia($index, 'current1')" class="thumbnail" ng-src="{{obj.src}}" /&gt;
                      &lt;/div&gt;
                      &lt;div ng-if="$index == 4"&gt;
                          &lt;div class="thumbnail" data-open="media-gallery"&gt;
                              &lt;label class="text-right success label"&gt;{{array.length - 3}} +&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class="small-9 columns"&gt;
                  &lt;img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
      &lt;div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="main-media"&gt;
                  &lt;img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" /&gt;
                  &lt;hr&gt;
  
                  &lt;div class="nested-media" scroll-thumbnail&gt;
                      &lt;img ng-click="changeMainMedia($index, 'current2')" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;button class="close-button" data-close aria-label="Close reveal" type="button"&gt;
             &lt;span aria-hidden="true"&gt;x&lt;/span&gt;
          &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var app = angular.module("mediaGallery", []);
          app.controller("mediaGalleryCtrl", ['$scope', function(scope) {
              var array = [{
                  src: "https://placeimg.com/640/480/any"
              }, {
                  src: "https://placeimg.com/640/480/tech"
              }, {
                  src: "https://placeimg.com/640/480/animals"
              }, {
                  src: "https://placeimg.com/640/480/nature"
              }, {
                  src: "https://placeimg.com/640/480/arch"
              }, {
                  src: "https://placeimg.com/640/480/people"
              }];
  
              scope.array = array;
              scope.current1 = 0
              scope.current2 = 0;
  
              scope.changeMainMedia = function(index, key) {
                  scope[key] = index;
              }
  
              scope.key = function($event) {
                  var previous = -1;
                  var current = scope.current2;
  
                  if ($event.keyCode == "39") {
                      previous = current;
                      current = (current + 1) % array.length;
                  } else if ($event.keyCode == "37") {
                      previous = current;
                      current = (current - 1) % array.length;
                  }
                  current = current &lt; 0 ? (array.length + current) : current;
  
                  scope.current2 = current;
              }
          }]);
  
          app.directive('scrollThumbnail', function() {
              return {
                  link: function(scope, elem, attrs) {
                      elem.on("click", function(event) {
                          $(this).animate({
                              scrollLeft: $(event.target).position().left
                          }, "slow");
                      });
                  }
              };
          });
  
          $(document).foundation()
      &lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>