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">
                                <input type="text" class="form-control" placeholder="{{::a || 'kkkkk'}}" ng-model="personalDetails.fname" required>   
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Last name" ng-model="personalDetails.lname" required>   
                            </div>
                            <div class="form-group">
                                <input type="email" class="form-control" placeholder="Email" ng-model="personalDetails.email" required>  
                            </div>
                            <div class="clearfix">
                                <input type="submit" value="Submit" class="btn btn-primary">    
                            </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><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr...

CSS

.container{
  margin: 20px 0;
}

JavaScript

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.a = 66
    $scope.personalDetails = [
        {
            'fname':'Muhammed',
            'lname':'Shanid',
            'email':'[email protected]'
        },
        {
            'fname':'John',
            'lname':'Abraham',
            'email':'[email protected]'
        },
        {
            'fname':'Roy',
            'lname':'Mathew',
            'email':'[email protected]'
        }];
    
        $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;
            });
        }; 
    
}]);