Creating a small dialog controller where questions, answers, and correct answer index can be added. The goal is to allow users to add multiple questions and save them in an array.

Everything works smoothly until attempting to push the JSON data of the question details into a previously created array. When trying to push, JavaScript throws an error:

Cannot read property 'push' of undefined

. Researched how to push values into an array in Angular but couldn't find an exact solution for this issue.

Below is the code snippet:

function TestController($mdDialog, $scope, $mdSidenav, $mdBottomSheet, $timeout, $log) {
    $scope.questionSet = [];
    $scope.question = {
        text: null,
        answers: [],
        correctIndex: -1
    };

    $scope.clickPoP = function(ev) {
        // Dialog appended to document.body
        var parentEl = angular.element(document.body);

        $mdDialog.show({
            parent: parentEl,
            targetEvent: ev,
            templateUrl: "edit-word-dialog.tmpl.html",
            locals: {
                items: $scope.question
            },
            controller: DialogController
        });

        function DialogController($scope, $mdDialog) {
            $scope.cancel = function() {
                $mdDialog.hide();
            }

            $scope.addQuestion = function(nextQuestion) {
                if (nextQuestion === true) {
                    console.log($scope.question);
                    $scope.questionSet.push($scope.question);
                    console.log('added question - clearing object - waiting for next input');
                } else {
                    console.log($scope.questionSet);
                    console.log('added question- closing dialog box');
                    $mdDialog.hide();
                }
            }

            $scope.setAnswer = function(index) {
                $scope.question.correctIndex = index;
                console.log(index);
            }
        }
    };
}

The defined questionSet should store the questions. In the addQuestion() function, I attempt to push the JSON object with all necessary data into questionSet, resulting in the error.

Tried verifying data bindings, everything seems correct yet unable to push JSON into the array. Precaution was taken to avoid appending to simplify management. It's worth noting that my experience with Angular is limited.

Thank you for assistance! Apologies for the lengthy explanation.

Showcasing the dialog box code below, in case the error traces back here:

<md-dialog class="email-dialog" flex="80" flex-sm="100">
<md-toolbar class="toolbar-default" md-theme="{{triSkin.elements.toolbar}}" palette-background="myPurple:500">
    <div class="md-toolbar-tools">
        <h2>
          <span>Quiz</span>
        </h2>
        <span flex></span>
    </div>
</md-toolbar>
<md-divider></md-divider>
<md-dialog-content class="sticky-container">
    <div>
        <md-content>
            <md-input-container>
                <label for="question-text">Enter Question</label>
                <input type="text" id="quiz-question" label="quiz-question" name="quiz-question" ng-model="question.text">
            </md-input-container>
            <div style="float: right; width: 10%">
                <md-radio-group>
                    <md-radio-button value="0" aria-label="ans0" ng-click="setAnswer(0)"></md-radio-button>
                    <br/>
                    <br/>
                    <md-radio-button value="1" aria-label="ans1" ng-click="setAnswer(1)"></md-radio-button>
                    <br/>
                    <br/>
                    <md-radio-button value="2" aria-label="ans2" ng-click="setAnswer(2)"><//md-radio-button>
                    <br/>
                    <br/>
                    <md-radio-button value="3" aria-label="ans3" ng-click="setAnswer(3)"></md-radio-button>
                </md-radio-group>
            </div>
            <div style="float: right; width: 80%;">
                <md-input-container>
                    <label for="answer-one">Enter answer</label>
                    <input type="text" id="quiz-answer-one" label="quiz-answer-one" name="quiz-answer-one" ng-model="question.answers[0]">
                </md-input-container>
                <md-input-container>
                    <label for="answer-two">Enter answer</label>
                    <input type="text" id="quiz-answer-two" label="quiz-answer-two" name="quiz-answer-two" ng-model="question.answers[1]">
                </md-input-container>
                <md-input-container>
                    <label for="answer-three">Enter answer</label>
                    <input type="text" id="quiz-answer-three" label="quiz-answer-three" name="quiz-answer-three" ng-model="question.answers[2]">
                </md-input-container>
                <md-input-container>
                    <label for="answer-four">Enter answer</label>
                    <input type="text" id="quiz-answer-four" label="quiz-answer-four" name="quiz-answer-four" ng-model="question.answers[3]">
                </md-input-container>
            </div>
            <div style="float:left;">
                <md-button class="md-primary" aria-label="AddQuestion" ng-click="addQuestion(true)">Add Question</md-button>
                &nbsp;
                <md-button class="md-secondary" aria-label="Save" ng-click="addQuestion(false)">Save</md-button>
            </div>
        </md-content>
    </div>
</md-dialog-content>
<div class="md-actions" layout="row">
    <span flex></span>
    <md-button class="md-primary" aria-label="Close" ng-click="cancel()">
        Close
    </md-button>
</div>