angularjs - $interval inside of a for loop -

i'm looking way count down 3 , save picture video element series of 4 times. countdowntimer 3,2,1,3,2,1,3,2,1,3,2,1. see code below. right code sets countdowntimer "3", 4 times in row , counts down -9. think understand why happening there way timer reset 3 desired output?

    //counts down 3 before each picture , adds each picture canvas     for(i = 0; < 4; i++){         $scope.countdowntimer = 3  //reset timer 3         console.log($scope.countdowntimer);        //counts down 3       $interval(function(){         $scope.countdowntimer = $scope.countdowntimer - 1;         console.log($scope.countdowntimer);       }, 1000, 3)       //takes picture , adds canvas       .then(function(){         canvas.getcontext('2d').drawimage(video, dx[i], dy[i], picwidth, picheight);       })     } 

if don't care printing countdown may can try this.

     //counts down 3 before each picture , adds each picture canvas             for(i = 0; <= 4; i++){                 code..                //counts down 3               $interval(function(){ //takes picture , adds canvas               .then(function(){                 canvas.getcontext('2d').drawimage(video, dx[i], dy[i], picwidth, picheight);               })                }, 3000, 3)             }