Generate Dynamic Table content by using form fields in AngularJs

We all know that "AngularJs" is adopting vastly. We already found so many example of AngularJs and Application in AngularJS. We had created an example of "AngularJs" relate to "generate dynamic table data by submitting form".

Below, the entire code is described and you can also test it by implementing it or downloading the attached file.

HTML Code

<div class="webContainer" ng-app="myApp">
  <!-- =Form-Table Section start= -->
  <section ng-controller="customerTblController" class="formSection">
    <form ng-submit="submitForm(myForm)" class="personal-info-form">
        <label>First Name</label>
        <input type="text" ng-model="fName" name="fname" /> <br />

        <label>Last Name</label>
        <input type="text" ng-model="lName" name="lname" /> <br />
        <label>Age</label>
        <input type="text" ng-model="age" name="Age" /> <br />

        <label>Highest Qualification</label>
        <input type="text" ng-model="hQualification" name="hQualification" /> <br />
        <label>Institute Name</label>
        <input type="text" ng-model="instituteName" name="instituteName" /> <br />
        <label></label>
        <input type="submit" name="submit" class="btn-submit" /> <br />
    </form>


    <table border="1" cellspacing="2" cellpadding="5" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Highest Qualification</th>
                <th>Institute Name</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat ="fields in personalInfoForm">
                <td>{{ fields.FirstName }}</td>
                <td>{{ fields.LastName }}</td>
                <td>{{ fields.Age }}</td>
                <td>{{ fields.HighestQualification }}</td>
                <td>{{ fields.InstituteName }}</td>
            </tr>
        </tbody>
    </table>
  </section><!-- =Form-Table Section End/= -->
</div>

Angular File and Code

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>

<script type="text/javascript">
    var testApp = angular.module("myApp", []);
    testApp.controller("customerTblController", function($scope) {
        $scope.personalInfoForm = [];
        $scope.submitForm = function(){        
            $scope.personalInfoForm.push({ 
                'FirstName':$scope.fName,
                'LastName': $scope.lName, 
                'Age': $scope.age, 
                'HighestQualification': $scope.hQualification, 
                'InstituteName': $scope.instituteName  
            });
            $scope.fName= '';
            $scope.lName= '';
            $scope.age= '';
            $scope.hQualification= '';
            $scope.instituteName= '';
        };
    });
</script>

CSS Code

.webContainer {
    width:80%;
    min-width:960px;
    margin:0 auto;    
}
.personal-info-form { 
    background: #D9D2C6; 
    padding:30px 0;
}
.formSection label {
    width:30%;
    max-width:300px;
    display: inline-block;
    margin:0 0 20px 20%;
}
.personal-info-form input[type="text"] {
    width:30%;
    max-width:300px;
    display:inline-block;
    padding:10px 10px;
}