Create rotary banner with Angularjs?

Question

I’m trying to create a rotating banner with Angularjs. I want the action 1 minute to be drawn a position of an array of images and the image to be displayed.

How to do this ?

I’m trying like this.

JS

var app = angular.module('starter');

app.controller('BannerAnuncios', function($scope, $timeout){

    var banners = ["imagem1.jpg", "imagem2.jpg", "imagem3.jpg", "imagem4.jpg", "imagem5.jpg"];
    var count = banners.length;

    function rotationBanner(){  
        var i = Math.floor(Math.random() * count);
        $scope.banner = banners[i];
        $timeout(rotationBanner(), 60000)
    }

    rotationBanner();

});

HTML

<div class="bar bar-footer bar-balanced" ng-controller='BannerAnuncios'>
      <img ng-src={{banner}}>
</div>

Answer 1

I’d say your problem is on the line

$timeout(rotationBanner(), 60000)

Notice that you call the function $timeout and in the first parameter you already invoke the function rotationBanner, a function that returns nothing being expected to pass a function as a parameter, for example:

$timeout(function(){rotationBanner()}, 60000)

Or by simplifying a little more, as its function does not need any parameters it would be possible to simply do so

$timeout(rotationBanner, 60000)