Fix #70 dynamic data watcher to reload

app/scripts/app.coffee

@@ -1,135 +1,134 @@
 'use strict'
 
 angular.module('slick', [])
-  .directive "slick", ($timeout) ->
-    restrict: "AEC"
-    scope:
-      initOnload: "@"
-      data: "="
-      currentIndex: "="
-      accessibility: "@"
-      adaptiveHeight: "@"
-      arrows: "@"
-      asNavFor: "@"
-      appendArrows: "@"
-      appendDots: "@"
-      autoplay: "@"
-      autoplaySpeed: "@"
-      centerMode: "@"
-      centerPadding: "@"
-      cssEase: "@"
-      customPaging: "&"
-      dots: "@"
-      draggable: "@"
-      easing: "@"
-      fade: "@"
-      focusOnSelect: "@"
-      infinite: "@"
-      initialSlide: "@"
-      lazyLoad: "@"
-      onBeforeChange: "&"
-      onAfterChange: "&"
-      onInit: "&"
-      onReInit: "&"
-      onSetPosition: "&"
-      pauseOnHover: "@"
-      pauseOnDotsHover: "@"
-      responsive: "="
-      rtl: "@"
-      slide: "@"
-      slidesToShow: "@"
-      slidesToScroll: "@"
-      speed: "@"
-      swipe: "@"
-      swipeToSlide: "@"
-      touchMove: "@"
-      touchThreshold: "@"
-      useCSS: "@"
-      variableWidth: "@"
-      vertical: "@"
-      prevArrow:"@"
-      nextArrow:"@"
+.directive "slick", () ->
+  restrict: "AEC"
+  scope:
+    initOnload: "@"
+    data: "="
+    currentIndex: "="
+    accessibility: "@"
+    adaptiveHeight: "@"
+    arrows: "@"
+    asNavFor: "@"
+    appendArrows: "@"
+    appendDots: "@"
+    autoplay: "@"
+    autoplaySpeed: "@"
+    centerMode: "@"
+    centerPadding: "@"
+    cssEase: "@"
+    customPaging: "&"
+    dots: "@"
+    draggable: "@"
+    easing: "@"
+    fade: "@"
+    focusOnSelect: "@"
+    infinite: "@"
+    initialSlide: "@"
+    lazyLoad: "@"
+    onBeforeChange: "&"
+    onAfterChange: "&"
+    onInit: "&"
+    onReInit: "&"
+    onSetPosition: "&"
+    pauseOnHover: "@"
+    pauseOnDotsHover: "@"
+    responsive: "="
+    rtl: "@"
+    slide: "@"
+    slidesToShow: "@"
+    slidesToScroll: "@"
+    speed: "@"
+    swipe: "@"
+    swipeToSlide: "@"
+    touchMove: "@"
+    touchThreshold: "@"
+    useCSS: "@"
+    variableWidth: "@"
+    vertical: "@"
+    prevArrow:"@"
+    nextArrow:"@"
 
-    link: (scope, element, attrs) ->
-      destroySlick = () ->
-        $timeout(() ->
-          slider = $(element)
-          slider.unslick()
-          slider.find('.slick-list').remove()
-          slider
-        )
-      initializeSlick = () ->
-        $timeout(() ->
-          slider = $(element)
-          currentIndex = scope.currentIndex if scope.currentIndex?
-          slider.slick
-            accessibility: scope.accessibility isnt "false"
-            adaptiveHeight: scope.adaptiveHeight is "true"
-            arrows: scope.arrows isnt "false"
-            asNavFor: if scope.asNavFor then scope.asNavFor else undefined
-            appendArrows: if scope.appendArrows then $(scope.appendArrows) else $(element)
-            appendDots: if scope.appendDots then $(scope.appendDots) else $(element)
-            autoplay: scope.autoplay is "true"
-            autoplaySpeed: if scope.autoplaySpeed? then parseInt(scope.autoplaySpeed, 10) else 3000
-            centerMode: scope.centerMode is "true"
-            centerPadding: scope.centerPadding or "50px"
-            cssEase: scope.cssEase or "ease"
-            customPaging: if attrs.customPaging then scope.customPaging else undefined
-            dots: scope.dots is "true"
-            draggable: scope.draggable isnt "false"
-            easing: scope.easing or "linear"
-            fade: scope.fade is "true"
-            focusOnSelect: scope.focusOnSelect is "true"
-            infinite: scope.infinite isnt "false"
-            initialSlide:scope.initialSlide or 0
-            lazyLoad: scope.lazyLoad or "ondemand"
-            onBeforeChange: if attrs.onBeforeChange then scope.onBeforeChange else undefined
-            onAfterChange: (sl, index) ->
-              scope.onAfterChange() if attrs.onAfterChange
-              if currentIndex?
-                scope.$apply(->
-                  currentIndex = index
-                  scope.currentIndex = index
-                )
-            onInit: (sl) ->
-              scope.onInit() if attrs.onInit
-              if currentIndex?
-                sl.slideHandler(currentIndex)
-            onReInit: if attrs.onReInit then scope.onReInit else undefined
-            onSetPosition: if attrs.onSetPosition then scope.onSetPosition else undefined
-            pauseOnHover: scope.pauseOnHover isnt "false"
-            responsive: scope.responsive or undefined
-            rtl: scope.rtl is "true"
-            slide: scope.slide or "div"
-            slidesToShow: if scope.slidesToShow? then parseInt(scope.slidesToShow, 10) else 1
-            slidesToScroll: if scope.slidesToScroll? then parseInt(scope.slidesToScroll, 10) else 1
-            speed: if scope.speed? then parseInt(scope.speed, 10) else 300
-            swipe: scope.swipe isnt "false"
-            swipeToSlide: scope.swipeToSlide is "true"
-            touchMove: scope.touchMove isnt "false"
-            touchThreshold: if scope.touchThreshold then parseInt(scope.touchThreshold, 10) else 5
-            useCSS: scope.useCSS isnt "false"
-            variableWidth: scope.variableWidth is "true"
-            vertical: scope.vertical is "true"
-            prevArrow: if scope.prevArrow then $(scope.prevArrow) else undefined
-            nextArrow: if scope.nextArrow then $(scope.nextArrow) else undefined
+  link: (scope, element, attrs) ->
+    currentIndexWatcher = null
+    dataWatcher = null
+    destroySlick = () ->
+      slider = $(element)
+      slider.unslick()
+      slider.find('.slick-list').remove()
+      slider
+    initializeSlick = () ->
+      slider = $(element)
+      currentIndex = scope.currentIndex if scope.currentIndex?
+      slider.slick
+        accessibility: scope.accessibility isnt "false"
+        adaptiveHeight: scope.adaptiveHeight is "true"
+        arrows: scope.arrows isnt "false"
+        asNavFor: if scope.asNavFor then scope.asNavFor else undefined
+        appendArrows: if scope.appendArrows then $(scope.appendArrows) else $(element)
+        appendDots: if scope.appendDots then $(scope.appendDots) else $(element)
+        autoplay: scope.autoplay is "true"
+        autoplaySpeed: if scope.autoplaySpeed? then parseInt(scope.autoplaySpeed, 10) else 3000
+        centerMode: scope.centerMode is "true"
+        centerPadding: scope.centerPadding or "50px"
+        cssEase: scope.cssEase or "ease"
+        customPaging: if attrs.customPaging then scope.customPaging else undefined
+        dots: scope.dots is "true"
+        draggable: scope.draggable isnt "false"
+        easing: scope.easing or "linear"
+        fade: scope.fade is "true"
+        focusOnSelect: scope.focusOnSelect is "true"
+        infinite: scope.infinite isnt "false"
+        initialSlide:scope.initialSlide or 0
+        lazyLoad: scope.lazyLoad or "ondemand"
+        onBeforeChange: if attrs.onBeforeChange then scope.onBeforeChange else undefined
+        onAfterChange: (sl, index) ->
+          scope.onAfterChange() if attrs.onAfterChange
+          if currentIndex?
+            scope.$apply(->
+              currentIndex = index
+              scope.currentIndex = index
+            )
+        onInit: (sl) ->
+          scope.onInit() if attrs.onInit
+          if currentIndex?
+            sl.slideHandler(currentIndex)
+        onReInit: if attrs.onReInit then scope.onReInit else undefined
+        onSetPosition: if attrs.onSetPosition then scope.onSetPosition else undefined
+        pauseOnHover: scope.pauseOnHover isnt "false"
+        responsive: scope.responsive or undefined
+        rtl: scope.rtl is "true"
+        slide: scope.slide or "div"
+        slidesToShow: if scope.slidesToShow? then parseInt(scope.slidesToShow, 10) else 1
+        slidesToScroll: if scope.slidesToScroll? then parseInt(scope.slidesToScroll, 10) else 1
+        speed: if scope.speed? then parseInt(scope.speed, 10) else 300
+        swipe: scope.swipe isnt "false"
+        swipeToSlide: scope.swipeToSlide is "true"
+        touchMove: scope.touchMove isnt "false"
+        touchThreshold: if scope.touchThreshold then parseInt(scope.touchThreshold, 10) else 5
+        useCSS: scope.useCSS isnt "false"
+        variableWidth: scope.variableWidth is "true"
+        vertical: scope.vertical is "true"
+        prevArrow: if scope.prevArrow then $(scope.prevArrow) else undefined
+        nextArrow: if scope.nextArrow then $(scope.nextArrow) else undefined
 
+      currentIndexWatcher() if currentIndexWatcher
+      currentIndexWatcher = scope.$watch("currentIndex", (newVal, oldVal) ->
+        if currentIndex? and newVal? and newVal != currentIndex
+          slider.slickGoTo(newVal)
+      )
 
-          scope.$watch("currentIndex", (newVal, oldVal) ->
-            if currentIndex? and newVal? and newVal != currentIndex
-              slider.slickGoTo(newVal)
-          )
-        )
+    if scope.initOnload
+      isInitialized = false
+      dataWatcher() if dataWatcher
+      dataWatcher = scope.$watch("data", (newVal, oldVal) ->
+        if newVal?
+          if isInitialized
+            destroySlick()
 
-      if scope.initOnload
-        isInitialized = false
-        scope.$watch("data", (newVal, oldVal) ->
-          if newVal?
-            if isInitialized
-              destroySlick()
-
-            initializeSlick()
-            isInitialized = true
-        )
-      else
-        initializeSlick()
+          initializeSlick()
+          isInitialized = true
+      )
+    else
+      initializeSlick()