title: Making a 10 second timer for an Angular JS application
body: <p>I was working on a quiz application in Angular JS, more like the quiz up application where you can have a timed quiz consisting of questions, each question giving you 10 seconds to answer.I have completed making a quiz application which allows me to answer questions and at the end giving results but i am stuck on the problem of how I can introduce a timer for each of my questions? Do i have to make a separate directive or a controller? The problem is that the timer requires a $timeout function which creates a delay but that creates a delay in my application altogether. Any help?</p>
  
  <p>Note : I am a beginner in Angular JS.</p>
  
  <p>app.js :</p>
  
  <pre><code>var app = angular.module('TheQuiz',[]);
  
  app.controller('QuizControl',['$scope','$http','$sce','$timeout',function($scope,$http,$sce,$timeout){
  
      $scope.score = 0;
      $scope.presentQues = -1;
      $scope.presentQuesAnswered = 0;
      $scope.percent = 0;
      $scope.playername = $scope.playername;
      $scope.myself = false;
  
      $http.get('getdata.php').then(function(qData){
          $scope.Questions = qData.data;
          $scope.fullQuestions = $scope.Questions.length;
      });
  
      $scope.startQuiz = function(){
          if ($scope.playername.length){
              $scope.presentQues = 0;
          }
      }
  
      $scope.restart = function(){
  
          $scope.score = 0;
          $scope.presentQues = -1;
          $scope.presentQuesAnswered = 0;
          $scope.percent = 0;
          $scope.playername = "";
          $http.get('getdata.php').then(function(qData){
          $scope.Questions = qData.data;
          $scope.fullQuestions = $scope.Questions.length;
  
      });
  
      }
  
      $scope.selectAns = function(pIndex , rIndex){
  
          var quesState = $scope.Questions[pIndex].quesState;
  
          if ( quesState != 'answered' ){
  
              $scope.Questions[pIndex].selectedAns = rIndex;
              var rightAns = $scope.Questions[pIndex].correct;
              $scope.Questions[pIndex].rightAns = rightAns;
  
              if (rIndex === rightAns){
                   $scope.Questions[pIndex].correctness = 'correct';
                  $scope.score += 1;
              }
  
              else {
                  $scope.Questions[pIndex].correctness = 'incorrect';
              }
  
              $scope.Questions[pIndex].quesState = "answered";
          }
  
          $scope.percentage = (($scope.score / $scope.fullQuestions) * 100).toFixed(2);
  
      }
  
      $scope.yesselected = function(pIndex , rIndex){
          return  $scope.Questions[pIndex].selectedAns === rIndex;
      }
  
      $scope.yescorrect = function(pIndex , rIndex){
          return  $scope.Questions[pIndex].rightAns === rIndex;
      }
  
      $scope.Continue = function(){
          return $scope.presentQues += 1;
      }
  
      $scope.Pass = function(){
            return $scope.presentQues += 1;
      }
  
  }]);
  </code></pre>