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="First name" 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="form-group">
                                <select class="form-control" ng-model="personalDetails.jobtype" ng-options="jobtype for jobtype in jobtypes"></select>
                            </div>
                            <div class="form-group" ng-repeat="hobby in hobbies">
                              <label>
							  		<input type="checkbox"  ng-model="hobby.isChecked">
								  	<span>{{hobby.name}}</span>
                              </label>
                            </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">
    ...

CSS

.container{
  margin: 20px 0;
}

JavaScript

var app = angular.module("myapp", []);
app.controller("ListController", ['$scope','filterFilter', function($scope, filterFilter) {
	 	$scope.jobtypes = ['accountant', 'janitor', 'ceo', 'receptionist'];
    	$scope.hobbies = [{name: "long walks on the beach", id: "1", isChecked: false},{name: "eating cheese", id: "2", isChecked: false},{name: "writing haikus", id: "3", isChecked: false},{name: "looking for bigfoot", id: "4", isChecked: false},{name: "watching police academy", id: "5", isChecked: false}];
    $scope.personalDetails = [
        {
            'fname':'Muhammed',
            'lname':'Shanid',
            'jobtype': 'ceo',
            'email':'[email protected]',
            'active': true,
            'hobbies': [{name: "long walks on the beach", id: "1"},{name: "watching police academy", id: "5"}]
        },
		
        {
            'fname':'John',
            'lname':'Abraham',
            'jobtype': 'accountant',
            'email':'[email protected]',
            'active': true,
            'hobbies': [{name: "writing haikus", id: "3"},{name: "looking for bigfoot", id: "4"}]
        },
        {
            'fname':'Roy',
            'lname':'Mathew',
            'jobtype': 'janitor',
            'email':'[email protected]',
            'active': false,
            'hobbies': [{name: "eating cheese", id: "2"}]
        }];
        $scope.hobbiesSelection = [];
        $scope.selectedHobbies = function selectedHobbies() {
            return filterFilter($scope.hobbies, { selected: true });
        };
        $scope.$watch('hobbies|filter:{isChecked:true}', function (hobbies) {
            $scope.hobbiesSelection = hobbies;
        }, true);
        
        $scope.addNew = function(personalDetails){

            $scope.personalDetails.push({ 
                'fname': personalDetails.fname, 
                'lname': personalDetails.lname,
                'email': personalDetails.email,
                'jobtype': personalDetails.jobtype,
               ...