Angularjs: View is not updating when scope in controller changes

Question

View is not updating when my scope in controller is changing. I am actually trying to use a timer in my html. When timer is counting down, it is not updating in the view.

here is my view:

<div class="quiz-container" ng-controller="KbcQuizController">
<div class="clockdiv">
        <div class="timer">
            <span class="second">{{timer.value}}</span> <img class="timer-icon"
                src="/app/images/timer.png">
        </div>
    </div>
</div>

Below is my controller:

(function() {

    'use strict';

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

    KbcQuizController.$inject = [ '$timeout', '$rootScope', '$scope', '$http',
            '$filter', 'ngDialog', 'usSpinnerService', 'quizService', '$state' ];
    function KbcQuizController($timeout, $rootScope, $scope, $http, $filter,
            ngDialog, usSpinnerService, quizService, $state) {
$scope.timer = {
        value : 60
    }
    $scope.counter = 60;
    var timeinterval;
    var mytimeout;
    $scope.onTimeout = function() {
                $scope.timer.value--;
                console.log("counter is::" + $scope.timer.value);
                mytimeout = $timeout($scope.onTimeout, 1000);
                if ($scope.timer.value == 0) {
                    alert("timeout");
                    $scope.stop();
                }
            }

            $scope.start = function() {
                $scope.timer.value = 60;
                mytimeout = $timeout($scope.onTimeout, 1000);
            }

            $scope.stop = function() {
                alert("in stop")
                $timeout.cancel(mytimeout);
            }

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

I am calling the startQuiz() method in controller from a dialog box. Below is the snippet:

<h3 class="dialog_header">Welcome to KBC!!</h3>
<div class="dialog-contents">
    <div class="ngdialog-message">
        <div>
            <div class="next-button">
                <button type="submit"
                    class="ngdialog-button ngdialog-button-primary"
                    ng-click="startQuiz(); closeThisDialog('button')">Start Quiz</button>
            </div>
        </div>
    </div>
</div>

Below is my module:

(function() {
    'use strict';
    var module = angular.module('app.kbcquiz', [ 'ui.router',
            'angularUtils.directives.dirPagination', 'ng-bootstrap-datepicker',
            'ngDialog', 'angularSpinner' ]);


    module.config(appConfig);

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

    function appConfig($stateProvider) {
        $stateProvider.state('app.kbcquiz', {
            url : '/rules',
            templateUrl : 'app/modules/kbcquiz/instructions.html',
        //  controller : 'KbcQuizController',
        //  controllerAs : 'vm'
        })

        .state('quizpage', {
            url : '/app/kbc-quiz',
            templateUrl : 'app/modules/kbcquiz/quiz-list.html',
        //  controller : 'KbcQuizController',
        //  controllerAs : 'vm'

        });

    }
})();

Please let me know where I am going wrong.

qchap · Accepted Answer · 2016-11-09 07:39:40Z

0

Have you add the ng-app directive in your index.html like this

<html ng-app="app.kbcquiz">

answered Nov 9, 2016 at 7:39

qchap

3456 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arnav Over a year ago

Yes, i have given.

qchap Over a year ago

can you publish all your code on a codepen for example because without more information it's hard to give you a response.

Collectives™ on Stack Overflow

Angularjs: View is not updating when scope in controller changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related