I need to save the filled in form values in a JSON and then display the same on click of button. 

I have saved the initial entries filled in but not able to pull up values saved through `ng-repeat`.

Here is the code. 

```
<html ng-app="formList">
<head>
<meta charset="UTF-8">
<title>Day 7 Angular Workaround</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/screen.css">
<script src="js/angular.js" type="text/javascript"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">

    <form id="form" method="post" action="post.php">
        <div class="form-group">
            <div class="col-sm-3"><label for="fname">First name</label></div>
            <div class="col-sm-9"><input type="text" class="form-control" id="fname" placeholder="First Name"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-3"><label for="lname">Surname</label></div>
            <div class="col-sm-9"><input type="text" class="form-control" id="lname" placeholder="Surname"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-3"><label>Gender</label></div>
            <div class="col-sm-9">
                <div class="radio">
                  <label>
                    <input type="radio" name="gender" id="male" value="male" checked>
                    Male
                  </label>
                </div>

                <div class="radio">
                  <label>
                    <input type="radio" name="gender" id="female" value="female">
                    Female
                  </label>
                </div>
            </div>
        </div>
        <div class="form-group">
           <div class="col-sm-3"> <label>Marital Status</label></div>
            <div class="col-sm-9">
                <div class="radio">
                    <label>
                     <input type="radio" name="marital" id="married" value="married" checked onchange="spouseField()">
                    Married
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="marital" id="unmarried" value="unmarried" onchange="spouseField()">
                    UnMarried
                  </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-3"><label for="spouse-name">Name of Spouse</label></div>
            <div class="col-sm-9"><input type="text" class="form-control" id="spouse-name" name="spouse-name" placeholder="Spouse name"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-3"><label for="other">Other Details</label></div>
            <div class="col-sm-9"><input type="text" class="form-control" id="other" name="other" placeholder="Enter Other Details..."></div>
        </div>

        <div class="col-sm-offset-3 col-sm-9">
            <button type="reset" class="btn btn-default" id="reset">Reset</button>
            <button type="submit" class="btn btn-default" id="submit" ng-click="showResults=true">Save &amp; Show</button>
            <!-- <button type="submit" class="btn btn-default" id="show" ng-click="showValues();">Hide</button> -->

        </div>
    </form> 

    <div id="showResults" ng-show="showResults" >
        <table class="table-responsive table-bordered table-striped">
            <tr>
                <th>Firstname</th>
                <th>LastName</th>
                <th>Other Details</th>
                <th>Gender</th>
            </tr>

            <tr ng-repeat="item in formElements">

                <td>{{item.firstName}}</td>
                <td>{{item.lastName}}</td>
                <td>{{item.other}}</td>
                <td>{{item.gender}}</td>

            </tr>

        </table>
    </div>

    </div>
</div>

<script type="text/javascript">

        var fname = document.getElementById('fname'); 
        var lname = document.getElementById('lname'); 
        var button = document.getElementById("submit");
        var spouseName = document.getElementById('spouse-name'); 
        var other = document.getElementById('other'); 
        var marital = document.getElementsByName('marital');
        var gender = document.getElementsByName('gender');

        var formValues = {};

        button.addEventListener('click', function(e){
            e.preventDefault();
            validateForm();

            return false;
         }); 

        //set focus

        fname.focus();

        //set spouse text field behaviour

        function spouseField(){

            // var marital = document.getElementsByName('marital');

            var marital_value;

            for(var i = 0; i < marital.length; i++){
                    if(marital[i].checked){
                        marital_value = marital[i].value;
                    }
                }

                if(marital_value ==="married"){

                    spouseName.disabled =  false;
                }
                else {
                    spouseName.disabled =  true;
                }
        }

        //empty fields check

        function validateForm(){

                var inputs = document.forms[0].getElementsByTagName("input");

                 for (var i = 0; i<inputs.length; i++){
                    if (!inputs[i].value && inputs[i].disabled === false ){

                        alert( inputs[i].placeholder + " can not be empty.");
                        inputs[i].focus();
                         return false;
                     }

                 }

                 // check for empty spaces on name and spouse name
                    if( fname.value.trim().length == 0 || lname.value.trim().length == 0 || (spouseName.value.trim().length == 0 && spouseName.disabled ===  false) ){
                        alert("Empty spaces in name fields not allowed");
                        return false;
                    }

                saveValues();
                // showValues();
             // alert("Thank you !");
        }

        function saveValues(){

            formValues.firstName =  fname.value;

            formValues.lastName = lname.value; 

            formValues.other = other.value;

            formValues.gender = (function genderValue(){
                for (var i = 0, length = gender.length; i < length; i++) {
                    if (gender[i].checked) {

                        return gender[i].value;

                    }
                }
            })();

            return formValues;

        }

 </script>
 <script type="text/javascript" src="js/app.js"></script>

 </body>
</html>

```

**APP.JS**

```
var app = angular.module("formList", []);
 app.controller("myCtrl", function($scope){
 $scope.formElements = formValues;

});

```