AngularJS Crude Operation In Sharepoint

HTML side

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     <script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <script src="/_layouts/15/angularjs/Apps.js"></script>
    <style>
     .odd {
       background-color: antiquewhite;
       color: #008b8b;
     }
     td th {
       height: 30px;
       min-width: 100px;
     }
     thead {
       background-color: darkgray;
       color: white;
       height: 30px;
     }
   </style>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div  ng-app="myApp" >
        <div ng-controller="myCtrl">
            <br />
            <br />
            <input id="getData" type="button" value="GetData" ng-click="ButtonClick()" />
            <input id="txtSearch" type="text" placeholder="Search by FirstName"  ng-model="searchText.Name"/>
            <br />
         
   <table border="1">
       <tr>
         <td>
                <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
         </td> <td>Id</td><td>Salutation</td> <td>FirstName</td> <td>LastName</td>
       </tr>
         <tr ng-repeat="x in showData | filter: searchText">
             <td>
                   <input type="checkbox" ng-model="x.Selected" />
             </td>
           <td>{{x.ID | uppercase }}</td>
           <td>{{x.Title | uppercase }}</td>
           <td>{{x.Name | lowercase}}</td>
           <td>{{x.Class | lowercase }}</td>
           <td><input  type="button" value="Edit" ng-click="GetItem(x.ID)" style="background-color:red;color:white"  />  </td>
           <td><input  type="button" value="Delete" ng-click="Delete(x.ID)" style="background-color:red;color:white"  />  </td>
       </tr>
   </table>
            <br />
      <table border="1">
          <tr>
             <td>Id:</td><td> <input id="txtUserId" type="text" ng-model="student.Id" /></td>
          </tr>
           <tr>
              <td> Salutation: </td><td>
     <select name="singleSelect" ng-model="student.salutation">
      <option value="Mr.">Mr.</option>
      <option value="Mrs.">Mrs.</option>
    </select>
                                    </td>
          </tr>
          <tr>
              <td> FirstName: </td><td><input id="txtName" type="text" ng-model="student.Name" /></td>
          </tr>
          <tr>
              <td>LastName:</td><td> <input id="txtIsUsed" type="text" ng-model="student.Class" /></td>
          </tr>
      </table>    
            <br />
            <input id="btnInsert" type="button" value="Insert" ng-click="InsertData()" />
            <input id="btnUpdate" type="button" value="Update" ng-click="UpdateData()" />
            <input id="btnDelete" type="button" value="Delete" ng-click="Delete('')" style="background-color:red;color:white" />
            <input id="btnDeleteAll" type="button" value="DeleteAll" ng-click="removeAll()" style="background-color:red;color:white" />            
        </div>
    </div>

Add Code in JS file Apps.js

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', readyFucntion);

function readyFucntion()
{
}

var app = angular.module("myApp", []);
app.controller('myCtrl', function ($scope, $http)
{
    $scope.ButtonClick = function ()
    {
   
       $scope.CommonMethod();
   
    }
    $scope.CommonMethod = function ()
    {
        $http({
            url: "/_api/web/lists/GetByTitle('AngularJS')/items",
            method: "GET",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data) {


            $scope.showData = data.d.results;
       
         
        }).error(function (sender, args) {


            console.log(args.get_message());

            });
 
    }
    $scope.ClearAll=function()
    {

        $scope.student.Id = "";
        $scope.student.Name = "";
        $scope.student.Class = "";
    }
    $scope.GetItem = function (itemId) {

        $http({
            url:"/_api/web/lists/getbytitle('AngularJS')/items(" + itemId + ")",
            method: "GET",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data)
        {
            $scope.student.Id=data.d.ID;
            $scope.student.Name=data.d.Name;
            $scope.student.Class=data.d.Class;
            $scope.student.salutation = data.d.Title;

        }).error(function (sender, args) {


            console.log(args.get_message());

        });

    }
    $scope.checkAll = function ()
    {
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.showData, function (item) {
            item.Selected = $scope.selectedAll;
        });
    }
    $scope.removeAll = function ()
    {
        alert("Feature is comming soon !OOPS");
    }
    $scope.student = { Id: "",Name: "", Class: "" };
    $scope.InsertData = function ()
    {
        var stu = $scope.student;
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var list = web.get_lists().getByTitle('AngularJS');
        var listItemInfo = new SP.ListItemCreationInformation();
        var listItem = list.addItem(listItemInfo);
        listItem.set_item('Title', stu.salutation);
        listItem.set_item('Name', stu.Name);
        listItem.set_item('Class', stu.Class);
        listItem.update();
        clientContext.executeQueryAsync($scope.onQuerySucceededInsert, Function.createDelegate(this, onQueryFailed));
    }
    $scope.UpdateData = function () {

        var stu = $scope.student;
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var list = web.get_lists().getByTitle('AngularJS');
        var listItem = list.getItemById(stu.Id);
        listItem.set_item('Title', 'Mr');
        listItem.set_item('Name', stu.Name);
        listItem.set_item('Class', stu.Class);
        listItem.update();
        clientContext.executeQueryAsync($scope.onQuerySucceededUpdated, Function.createDelegate(this, onQueryFailed));

    }
    $scope.Delete = function (itemId)
    {
        var stu = $scope.student;
     
        if (itemId.length == 0) {
            itemId = stu.Id;
        }
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var list = web.get_lists().getByTitle('AngularJS');
        var listItem = list.getItemById(itemId);
        listItem.deleteObject();
        clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
    }
    $scope.DeleteAll = function (itemId) {
        var stu = $scope.student;

        if (itemId.length == 0) {
            itemId = stu.Id;
        }
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var list = web.get_lists().getByTitle('AngularJS');
        var listItem = list.getItemById(itemId);
        listItem.deleteObject();
        clientContext.executeQueryAsync($scope.onQuerySucceededDeleted, Function.createDelegate(this, onQueryFailed));
    }
    $scope.onQuerySucceededInsert = function () {
        alert('Item Added Successfully');
        $scope.CommonMethod();
        $scope.ClearAll();

    }
    $scope.onQuerySucceededUpdated = function () {
        alert('Item Updated Successfully');
        $scope.CommonMethod();
        $scope.ClearAll();
    }
    $scope.onQuerySucceededDeleted = function () {
        alert('Item Deleted Successfully');
        $scope.CommonMethod();
        $scope.ClearAll();
    }
});
onQueryFailed = function (sender, args)
{ alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); }