AngularJS : view not updating

Question

My directive with controller :

app.directive("photoGallery", function() {
    return {
        restrict: 'E',
        templateUrl: 'part/photoGallery.html',
        controller: ["$http", function($http) {
            me = this;
            this.autoSlide = true;
            this.currentIndex = 2;
            this.autoSlide_timer;
            this.photos = [{}];

            this.Show = function(index) {
                me.currentIndex = index;
            };

            this.Next = function() {
                me.currentIndex++;
                console.log(me.currentIndex);
                if (me.currentIndex >= me.photos.length) {
                    me.currentIndex = 0;
                }
                me.Show(me.currentIndex);
            };

            this.Prev = function() {
                me.currentIndex--;
                if (me.currentIndex < 0) {
                    me.currentIndex = me.photos.length-1;
                }
                me.Show(me.currentIndex);
            };

            this.Init = function() {
                $http.get("img/slider/_data.json")
                .success(function(data) {
                    me.photos = data;
                    for(var i in me.photos) {
                        me.photos[i].index = i;
                    }
                    console.info(me.photos);
                })
                .error(function(e){
                    console.error(e);
                });
                this.autoSlide_timer = setInterval(this.Next, 1500);
            }();
        }],
        controllerAs: 'gallery'
    };
});

photoGallery.html :

<div class="GalleryContainer">{{gallery.currentIndex}}
    <div class="PhotoWrapper">
        <div ng-repeat="photo in gallery.photos" class="photo" ng-class="{active:gallery.currentIndex == photo.index}">
            <img ng-src="img/slider/{{photo.path}}">
        </div>
    </div>
</div>

as you can see, in the Next() function, I log currentIndex Next() is called every 1500ms thanks to setInterval(this.Next, 1500) in the Init() function. I can see in the console : 2, 3, 4, ... 10, 0, 1, 2 ...

But in the browser, {{gallery.currentIndex}} is never updated, it display the default value (2) (photoGallery.html line 1)

Answer 1

You have to use angular $interval() instead of JavaScript setInterval() function. Why ?

Because Angular needs to know when variables are updated. $interval make a call to $scope.$apply() at the end of its execution, executing a new $digest loop that notify the update to angular.

You can also wait the request to be successfully proceed to set you interval, to avoid errors.

this.Init = function() {
    $http.get("img/slider/_data.json")
    .success(function(data) {
        me.photos = data;
        for(var i in me.photos) {
            me.photos[i].index = i;
        }
        console.info(me.photos);

        me.autoSlide_timer = $interval(me.Next, 1500);
    })
    .error(function(e){
        console.error(e);
    });
}();