I have a series of questions along with their answers, and I want the user to select an answer from a drop-down menu. How can I achieve this? I've attempted the following code, but the select option isn't appearing on the screen.
HTML:
<div ng-controller="mainController" class="container" style="margin-top: 10%">
<div class="jumbotron">
<div id="start">
<h1 style="text-align: center">Discover the perfect movie for you to watch now!</h1>
<div class="center-block" style="margin-top: 30px">
<button ng-click="startQuestions()" class="btn btn-success center-block" style="margin:0px auto;">Start!</button>
</div>
</div>
<div id="questions" ng-switch="question" class="container">
<div ng-switch-when="-1"></div>
<div ng-switch-default>
<h2>{{questions[question].question}}</h2>
<select class="selectpicker">
<option ng-model="questions[question].answer">Yes</option>
<option ng-model="questions[question].answer">No</option>
</select>
</div>
</div>
</div>
</div>
JS:
knnapp.controller('mainController', function ($scope) {
$scope.question = -1;
$scope.questions = [
{
question: "Are you happy today?",
answer: ""
},
{
question: "Are you tired?",
answer: ""
},
{
question: "Do you like superheroes?",
answer: ""
}
];
$scope.startQuestions = function () {
angular.element(document.querySelector('#start')).css("display", "none");
$scope.question = 0;
};
});