<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Quiz questions with Angularjs</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
  <script>
    var app = angular.module('quizApp', []);

    app.controller('quizCtrl', function($scope) {
      $scope.checkResult = function(item) {
        //check answers.
        
        //if (item > 0) {
        // alert("Correct Anwers!");
        //} else {
        ///  alert("Wrong Answer!");
        //}
      };

      $scope.calRresult = function() {
        //calculat result.
      };

      $scope.quizAnsw = [{
        ans: 'Igor Minar',
        correct: 0
      }, {
        ans: 'Brad Green',
        correct: 0
      }, {
        ans: 'Misko Hevery',
        correct: 1
      }, {
        ans: 'Steve Souders',
        correct: 0
      }];
    });
  </script>
</head>

<body ng-app="quizApp" ng-controller="quizCtrl">
  <div>
    <h4>Q1 : Who created AngularJs framework?</h4>
    <div ng-repeat="quiz in quizAnsw">
      <label ng-click="checkResult(quiz.correct)">
        <input type="radio" name="answ" ng-value="$index" ng-model="quizSelectedAns" /> {{quiz.ans}}
      </label>
    </div>
    <br>
    <input type="button" ng-click="calRresult()" value="Quiz Result" class="fb9" />
  </div>
</body>

</html>
.fb9 {
	border: 1px solid #3366FF;
	background-color:#B3C6FF;
	width: 200px;
}
.fb9:hover {
	border: 2px dotted #FF6633;
	color:#FF6600;
	font-weight:bold;
}