AngularJs-在指令中动态设置$ timeout延迟

Question

I have this next method declared in a directive to show slides with a delay :

            var timer;

            var sliderFunc = function(){
                timer = $timeout(function(){
                    scope.next();
                    timer = $timeout(sliderFunc, 5000);
                }, 5000);
            };

            sliderFunc();

With this example, everything is good.

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 :

            var timer;
            scope.timeout = 5000;

            var sliderFunc = function(){
                timer = $timeout(function(){
                    scope.next();
                    timer = $timeout(sliderFunc, scope.timeout);
                }, scope.timeout);
            };

            sliderFunc();

In the first occurrence, delay is good, but in the next steps 'scope.timeout' is undefined.

Does any one have an idea how to solve it?

---

UPDATE 1 :

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 :

UPDATE 2 :

This is my entire directive :

'delay' is supposed to be set in my directive declaration.

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 < 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'
    };
});

Answer 1

When using two way bindings you can't just bind a scalar value such as an integer. You must bind to a property of an object. This is because of the way it stores a reference to the object. Basically anywhere you use a binding make sure there is a dot.

For example

$scope.test = {
 v: [],
 z: 1000
}

<div ng-app="myApp.central.directives" ng-controller="ctrl">
    <slider list="test.v" delay="test.z"></slider>
</div>