CRUD Operation in sharepoint using AngularJS

HTML PART

<link type="text/css" rel="stylesheet" href="/SiteAssets/bootstrap.min.css">
<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="/SiteAssets/bootstrap.min.js"></script>
<script type="text/javascript" src="/SiteAssets/angular.js"></script>
<script type="text/javascript" src="/SiteAssets/SPCRUD.js"></script>
   
    <div ng-app="spApp" style="width:50%">
    <h3>View Employee Detail</h3>
    <hr />
        <div ng-controller="viewItemsController">
        <table>
        <thead>
        <tr>
        <th>S.No</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="employee in employees">
        <td>{{employee.ID}}</td>
        <td>{{employee.Name}}</td>
        <td>{{employee.Age}}</td>
        <td>{{employee.Gender}}</td>
        <td>{{employee.Salary}}</td>
        </tr>
        </tbody>
        </table>
        </div>
        <hr />

        <h3>Add Employees</h3>
        <div ng-controller="addItemsController">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Ename">Employee Name :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Ename" ng-model="name" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Eage">Age :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Eage" ng-model="age" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Egen">Gender :</label>
                    <div class="col-sm-7">
                    <label><input  type="radio" id="Emale" name="Egen" ng-model="gender" ng-value="'Male'">Male</label>
                        <label><input  type="radio" id="EFemale" name="Egen" ng-model="gender" ng-value="'Female'">Female</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Esal">Salary :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Esal" ng-model="salary">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-5">
                       
                    </div>
                    <div class="col-sm-3">
                        <input type="button" class="btn btn-default form-control" id="btnAddEmployee" value="Add Employee" ng-click="addEmployee()">
                    </div>
                </div>
            </div>
        </div>
        <hr/>


        <h3>Edit Employees</h3>
        <div ng-controller="editItemsController">
        <div class="form-horizontal">
        <div class="form-group">
                    <label class="control-label col-sm-5" for="itemId">ID :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="itemId" ng-model="itemId">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Ename">Employee Name :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Ename" ng-model="name" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Eage">Age :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Eage" ng-model="age" >
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Egen">Gender :</label>
                    <div class="col-sm-7">
                    <label><input  type="radio" id="Emale" name="Egen" ng-model="gender" ng-value="'Male'">Male</label>
                        <label><input  type="radio" id="EFemale" name="Egen" ng-model="gender" ng-value="'Female'">Female</label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-5" for="Esal">Salary :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="Esal" ng-model="salary">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-5">
                       
                    </div>
                    <div class="col-sm-3">
                        <input type="button" class="btn btn-default form-control" id="btnEditEmployee" value="Edit Employee" ng-click="editEmployee()">
                    </div>
                </div>
            </div>
        </div>
        <hr/>


        <h3>Delete Employees</h3>
        <div ng-controller="delItemsController">
            <div class="form-horizontal">
                <div class="form-group">
                    <label class="control-label col-sm-5" for="itemId">ID :</label>
                    <div class="col-sm-7">
                        <input type="text" class="form-control" id="itemId" ng-model="itemId">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-5">
                       
                    </div>
                    <div class="col-sm-3">
                        <input type="button" class="btn btn-default form-control" id="btnDelEmployee" value="Delete Employee" ng-click="delEmployee()">
                    </div>
                </div>
            </div>
        </div>
    </div>
   
Angular JS Part

/// <reference path="/SiteAssets/angular.js" />

var listName = "AngularCRUD";
var spApp = angular
                .module("spApp", [])
                .controller("viewItemsController", function ($scope, $http,$log) {
                debugger;
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+ listName +"')/items?$select=Name,Age,Gender,Salary,ID";
                    $http(
                    {
                        method: "GET",
                        url: url,
                        headers: { "accept": "application/json;odata=verbose" }
                    }
                    ).then(function (response, status, headers, config) {
                        $scope.employees = response.data.d.results;
                        $log.info(response);
                    },function (reason, status, headers, config) {
                    
                    });                    
                })

                .controller("addItemsController", function ($scope, $http) {
                    var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+ listName +"')/items";
                    var vm = $scope;
                    vm.addEmployee = function () {
                    debugger;
                        return $http({
                            headers: { "Accept": "application/json; odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() },
                            method: "POST",
                            url: url,
                            data: {
                                'Name': vm.name,
                                'Age': vm.age,
                                'Gender': vm.gender,
                                'Salary': vm.salary
                            }
                        })
                        .then(saveEmployee)
                        .catch(function (message) {
                            console.log("addEmployee() error: " + message);
                        });
                        function saveEmployee(data, status, headers, config) {
                            alert("Item Added Successfully");
                            vm.name = "";
                            vm.age = "";
                            vm.gender = "";
                            vm.salary = "";
                        }
                    }
                })

                .controller("editItemsController", function ($scope, $http) {
                    debugger;
                    var vm = $scope;                    
                    vm.editEmployee = function () {
                     debugger;
                        var data = {
                            '__metadata': {
                                'type': 'SP.Data.'+ listName +'ListItem'
                            },
                            'Name': vm.name,
                            'Age': vm.age,
                            'Gender': vm.gender,
                            'Salary': vm.salary
                        };
                        return $http({
                            headers: {
                                "Accept": "application/json; odata=verbose",
                                "Content-Type": "application/json; odata=verbose",
                                "X-HTTP-Method": "MERGE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                "Content-Length": data.length,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+ listName +"')/items(" + vm.itemId + ")",
                            data: data
                        })
                        .then(saveEmployee)
                        .catch(function (message) {
                            console.log("editEmployee() error: " + message);
                        });
                        function saveEmployee(data, status, headers, config) {
                            alert("Item Edited Successfully");
                            return data.data.d;
                        }
                    }
                })

                .controller("delItemsController", function ($scope, $http) {
                    
                    var vm = $scope;                    

                    vm.delEmployee = function () {
                        return $http({
                            headers: {
                                "X-HTTP-Method": "DELETE",
                                "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                                'IF-MATCH': "*"
                            },
                            method: "POST",
                            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('"+ listName +"')/items(" + vm.itemId + ")"
                        })
                        .then(saveEmployee)
                        .catch(function (message) {
                            console.log("delEmployee() error: " + message);
                        });
                        function saveEmployee(data, status, headers, config) {
                            alert("Item Deleted Successfully");
                            return data.data.d;
                        }
                    }
                });