title: AngularJs - set $timeout delay dynamically in a directive
body: <p>I have this next method declared in a directive to show slides with a delay : </p>
  
  <pre><code>            var timer;
  
              var sliderFunc = function(){
                  timer = $timeout(function(){
                      scope.next();
                      timer = $timeout(sliderFunc, 5000);
                  }, 5000);
              };
  
              sliderFunc();
  </code></pre>
  
  <p>With this example, everything is good.</p>
  
  <p>But i want to set a different delay between first (1000) and others slides (5000).
  So i tried to set 'delay' parameter dynamically as this example :</p>
  
  <pre><code>            var timer;
              scope.timeout = 5000;
  
              var sliderFunc = function(){
                  timer = $timeout(function(){
                      scope.next();
                      timer = $timeout(sliderFunc, scope.timeout);
                  }, scope.timeout);
              };
  
              sliderFunc();
  </code></pre>
  
  <p>In the first occurrence, delay is good, but in the next steps 'scope.timeout' is undefined.</p>
  
  <p>Does any one have an idea how to solve it?</p>
  
  <hr>
  
  <p><strong>UPDATE 1 :</strong> </p>
  
  <p>If i inspect my code in the first occurence, 'delay' (equal to scope.timeout in the last example) is equal to '5000' when i enter in 'slideFunc', but is undefined in second function and on the next steps :</p>
  
  <p><img src="https://i.stack.imgur.com/4i0P1.png" alt="delay to timeout method"></p>
  
  <p><strong>UPDATE 2 :</strong> </p>
  
  <p>This is my entire directive :</p>
  
  <p>'delay' is supposed to be set in my directive declaration.</p>
  
  <pre><code>angular.module('myApp.central.directives', []).
  directive('slider', function($timeout) {
      return {
          restrict: 'AE',
          replace: true,
          scope: {
            list: '=',
            delay: '='
          },
          link: function (scope, elem, attrs) {
  
              scope.currentIndex = 0;
  
              scope.next = function(){
                  if (scope.currentIndex &lt; scope.list.length -1) {
                      scope.currentIndex++;
                  } else {
                      scope.currentIndex = 0;
                  }
              };
  
              scope.$watch('currentIndex',function(){
                  // some code useless for this problem
              });
  
              /* Start: For Automatic slideshow*/
  
              var timer;
              scope.delay = 5000;
  
              var sliderFunc = function(){
                  timer = $timeout(function(){
                      scope.next();
                      timer = $timeout(sliderFunc, scope.delay);
                  }, scope.delay);
              };
  
              sliderFunc();
  
              scope.$on('$destroy',function(){
                  $timeout.cancel(timer);
              });
  
              /* End : For Automatic slideshow*/
  
          },
          templateUrl: 'partials/widgets/slider-template.html'
      };
  });
  </code></pre>