AngularJS | Dynamic table with form

AngularJS | Dynamic table with form

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="myapp" ng-controller="ListController">     
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form ng-submit="addNew(personalDetails)">
                            <div class="form-group">
                                Name <input type="text" class="form-control" placeholder="First name" ng-model="personalDetails.fname" required>   
                            </div>
                            <div class="form-group">
                                Password<input type="password" class="form-control" placeholder="password" ng-model="personalDetails.password" required>   
                            </div>
                            <div class="form-group">
                                E-mail<input type="email" class="form-control" placeholder="Email" ng-model="personalDetails.email" required>  
                            </div>
                            <div class="clearfix">
                                <input type="submit" value="Submit">    
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" ng-hide="!personalDetails.length">
            <div class="col-md-12">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                       <th>First Name</th>
                            <th>password</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="personalDetail in personalDetails">
                            
                           ...

JavaScript

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
    $scope.personalDetails = [
        
          ]
    
        $scope.addNew = function(personalDetails){
            $scope.personalDetails.push({ 
                'fname': personalDetails.fname, 
                'lname': personalDetails.lname,
                'email': personalDetails.email,
            });
            $scope.PD = {};
        };
    
        $scope.remove = function(){
            var newDataList=[];
            $scope.selectedAll = false;
            angular.forEach($scope.personalDetails, function(selected){
                if(!selected.selected){
                    newDataList.push(selected);
                }
            }); 
            $scope.personalDetails = newDataList;
        };
    
        $scope.checkAll = function () {
            if (!$scope.selectedAll) {
                $scope.selectedAll = true;
            } else {
                $scope.selectedAll = false;
            }
            angular.forEach($scope.personalDetails, function (personalDetails) {
                personalDetails.selected = $scope.selectedAll;
            });
        }; 
    
}]);