<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/js/ngDialog.js"></script>
    <script src="script.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog-theme-default.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/0.6.4/css/ngDialog-theme-plain.css">
  </head>

  <body ng-app="app.kbcquiz">
   
   <div ui-view></div>

  </body>

</html>
(function() {
    'use strict';
    var module = angular.module('app.kbcquiz', [ 'ui.router', 'ngDialog' ]);

    module.config(appConfig);

    appConfig.$inject = [ '$stateProvider', '$urlRouterProvider' ];

    function appConfig($stateProvider) {
        $stateProvider.state('instructions', {
            url : '',
            templateUrl : 'instructions.html'
        })

        .state('quizpage', {
            url : '/app/kbc-quiz',
            templateUrl : 'quiz-list.html'
        });
    }
})();


(function() {

    'use strict';

    angular.module('app.kbcquiz').controller('KbcQuizController',KbcQuizController);

    KbcQuizController.$inject = [ '$timeout', '$rootScope', '$scope', '$http','$filter', 'ngDialog', '$state' ];
    function KbcQuizController($timeout, $rootScope, $scope, $http, $filter,ngDialog, $state) {
        //console.log("quizService is::" + quizService);
        $scope.count = 1;
        $scope.timer = {
            value : 60
        }

        var stopped;

        $scope.startTimer = function() {
            stopped = $timeout(function() {
                console.log($scope.timer.value);
                $scope.timer.value--;
                $scope.startTimer();
                if ($scope.timer.value === 0) {
                    alert("timeout");
                }
            }, 1000);
        };

        $scope.stop = function() {
            $timeout.cancel(stopped);

        }

        $scope.reset = function() {
            $scope.timer.value = 60;
        }

        $scope.startQuiz = function() {
            console.log("in start quiz");
            //quizService.getQuestion($scope.count).then(null, function(err) {
            //    console.log("error in get question");
            //});
            $scope.startTimer();
        }

        $scope.getWelcomePage = function() {
            $state.go('quizpage');
            ngDialog
                    .open({
                        template : 'welcome.html',
                        className : 'ngdialog-theme-default',
                        //controller : KbcQuizController,
                        //controllerAs : 'vm',
                        //scope : $scope,
                    });
        }

    }

})();
<div class="container-fluid" ng-controller="KbcQuizController">
    <div class="instructions-container">
        <div class="instructions-heading">
            <span class="header-text"> Rules </span>
        </div>
        <div>
            <p>1. Persons must enter the Competition on their own behalf and
                entry(ies) by proxy will not be accepted, even for their family
                members.</p>
            <p>2. An entry/ies is not transferrable.</p>
            <p>3. The Company or the Producers will not entertain any claims
                / questions / queries with respect to the authenticity or
                correctness of any questions and answers for the questions asked in
                any round of the Competition.</p>
            <p>4. The Company’s decision on the correctness or incorrectness
                of any answer is final and binding on all Contestants.</p>
            <p>5. Use of mobile phones will not be permitted during the
                shoot, and during the Auditions. It may lead to disqualification.</p>
        </div>
        <div class="next-container">
            <button class="next-button btn btn-primary" ng-click="getWelcomePage()">Start Quiz</button>
        </div>
    </div>
</div>
<h3 class="dialog_header">Welcome to KBC!!</h3>
<div class="dialog-contents" ng-controller="KbcQuizController">
  <div class="ngdialog-message">
    <div>
      <div class="next-button">
        <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="startQuiz(); closeThisDialog('button')">Start Quiz</button>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
<ul>
  <li>Which singer joined Mel Gibson in the movie Mad Max: Beyond The Thunderdome? TINA TURNER</li>
  <li>Vodka, Galliano and orange juice are used to make which classic cocktail? HARVEY WALLBANGER</li>
  <li>Which American state is nearest to the former Soviet Union? ALASKA</li>
  <li>In which year did Foinavon win the Grand National? 1967</li>
  <li>At which battle of 1314 did Robert The Bruce defeat the English forces? BANNOCKBURN</li>
  <li>Consecrated in 1962, where is the Cathedral Church of St Michael? COVENTRY</li>
  <li>On TV, who did the character Lurch work for? ADDAMS FAMILY</li>
  <li>Which children's classic book was written by Anna Sewell? BLACK BEAUTY</li>
  <li>How many arms/tentacles/limbs does a squid have? TEN (there are varying definitions of tentacles/arms for squids - generally a squid is considered to have two tentacles and eight arms - whatever, there are ten of them in total)</li>
  <li>Which reggae singing star died 11th May 1981? BOB MARLEY</li>
</ul>
</div>