         sliderTimeSeriesBack = document.getElementById('qi-slider-time-series-back')
         sliderTimeSeriesFwd = document.getElementById('qi-slider-time-series-fwd')
 
-        # Configure the slider.
-        #
-        # FIXME - The time series slider created is called twice,
-        #  perhaps as an Angular digest anomaly. An error is printed to the
-        #  console, but otherwise ther is no harm. Find out why it it is
-        #  called the second time and guard against it with  an if test
-        #  if necessary.
-        #
-        # TODO - Add tooltip to show current slider value.
-        #
-        noUiSlider.create sliderTimeSeries,
-          start: [ scope.volume.volumeNbr ]
-          step: 1
-          range:
-            'min': 1
-            'max': scope.timeSeries.image.volumes.size
-          pips:
-            mode: 'positions'
-            values: [0, 100]
-            density: 4
-
-        # When the slider is dragged, get the new slider position and update
-        # the image.
-        sliderTimeSeries.noUiSlider.on 'slide', ->
-          newVal = Math.floor sliderTimeSeries.noUiSlider.get()
-          updateImage(newVal)
-
-        updateImage = (volumeNbr) ->
-          # Update the image with the new volume number, which corresponds to
-          # new slider position.
-          scope.$apply ->
-            scope.volume.volumeNbr = volumeNbr
-
-        # When the back button is clicked, reduce the slider position by one
-        # and update the image.
-        sliderTimeSeriesBack.addEventListener 'click', ->
-          newVal = scope.volume.volumeNbr - 1
-          # Do the update only if the new value does not fall below 1.
-          if newVal >= 1
-            sliderTimeSeries.noUiSlider.set(newVal)
+        # Check for the existence of the time series slider object to prevent
+        # the create function from being called twice, which may result from an
+        # Angular digest anomaly.
+        if !sliderTimeSeries.noUiSlider
+          # Configure the slider.
+          #
+          # TODO - Add tooltip to show current slider value.
+          #
+          noUiSlider.create sliderTimeSeries,
+            start: [ scope.volume.volumeNbr ]
+            step: 1
+            range:
+              'min': 1
+              'max': scope.timeSeries.image.volumes.size
+            pips:
+              mode: 'positions'
+              values: [0, 100]
+              density: 4
+
+          # When the slider is dragged, get the new slider position and update
+          # the image.
+          sliderTimeSeries.noUiSlider.on 'slide', ->
+            newVal = Math.floor sliderTimeSeries.noUiSlider.get()
             updateImage(newVal)
 
-        # When the forward button is clicked, increase the slider position by
-        # one and update the image.
-        sliderTimeSeriesFwd.addEventListener 'click', ->
-          newVal = scope.volume.volumeNbr + 1
-          # Do the update only if the new value does not go above the number of
-          # volumes in the time series.
-          if newVal <= scope.timeSeries.image.volumes.size
-            sliderTimeSeries.noUiSlider.set(newVal)
-            updateImage(newVal)
+          updateImage = (volumeNbr) ->
+            # Update the image with the new volume number, which corresponds to
+            # new slider position.
+            scope.$apply ->
+              scope.volume.volumeNbr = volumeNbr
+
+          # When the back button is clicked, reduce the slider position by one
+          # and update the image.
+          sliderTimeSeriesBack.addEventListener 'click', ->
+            newVal = scope.volume.volumeNbr - 1
+            # Do the update only if the new value does not fall below 1.
+            if newVal >= 1
+              sliderTimeSeries.noUiSlider.set(newVal)
+              updateImage(newVal)
+
+          # When the forward button is clicked, increase the slider position by
+          # one and update the image.
+          sliderTimeSeriesFwd.addEventListener 'click', ->
+            newVal = scope.volume.volumeNbr + 1
+            # Do the update only if the new value does not go above the number of
+            # volumes in the time series.
+            if newVal <= scope.timeSeries.image.volumes.size
+              sliderTimeSeries.noUiSlider.set(newVal)
+              updateImage(newVal)
 
 
     directives.directive 'qiFocus', ['$timeout',


        # Configure the slider.
        #
        # TODO - Obtain the range max from the scope.timeSeries.image.volumes.size or
        #    scope.timeSeries.image.slices.size property. Pass this value as an argument
        #    to the refactored service function. Note: this requires that the image is
        #    loaded. Therefore, the slider compile must be coordinated with the image
        #    display compile. The slider create must then be deferred as a callback
        #    after load completes.
        #
        # TODO - Add tooltip to show current slider value.
        #
        scope.timeSeries.image.loader.callback = ->
          # Obtain the range max from the scope.timeSeries.image.volumes.size
          # property. This requires that the image is loaded. Therefore, the
          # slider compile must be coordinated with the image display compile.
          # The slider create must then be deferred as a callback after load

    # TODO - Refactor this and the following directive into one directive
    #   which calls the service function.
    #
    # TODO - Obtain the range max from the scope.timeSeries.image.volumes.size or
    #    scope.timeSeries.image.slices.size property. Pass this value as an argument
    #    to the refactored service function.
    #
    # TODO - Make a parent directive named qi-axial-select
    #   (resp. qi-volume-select) that contains the buttons and the slider.
    #   The parent manages the state and image display. The buttons and slider
