Pass text box value to services in angular

Question

I have two pages-one is to create data and when I click save button text box values will be send to backend method.
In another page am displaying those entered datas in table.So am using two controller methods here.
I dont know how to send text box values to backend using angular.
I did it using jquery simply but I dont know angular thats why am struggling.

This is my first page to save text box details:

<div class="row ">
               <label>Name<span id="required">*</span></label>          
               <input type="text" ng-model="item.name" class = "col-lg-5 col-md-5 col-sm-5 col-xs-10"/>
           </div>
           <div class="row ">
               <label class="col-lg-2 col-md-2 col-sm-3 col-xs-12 ">Description</label>
               <textarea ng-model="item.description"></textarea>
           </div>
           <div class="row marTop">
               <span class="pull-right">
                   <button class="btn save btn-primary"  ng-click="addItem(item)"><i class="fa fa-floppy-o"></i>Save</button>
                   <button class="btn cancel btn-default" onclick="window.location.href = '/Admin/RoleList'"><i class="fa fa-ban"></i>Cancel</button>
               </span>
           </div>

Script: In this method only I need to pass name and description values

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.items = [];
                    $scope.addItem = function (item) {
                        $scope.items.push(item);
                        $scope.item = {};
                    }
                    //$scope.item = aaa;
                    console.log(item)
                    //$scope.values = {
                    //    name: 'newroleName',
                    //    description: 'roledescription'
                    //};
                    $http.post("/Admin/RolesInsert"){
                        alert("success")
                    }

                })
</script>

This is my second page to get table data( that saved name should be display in this table)

<table class="table table-hover table-bordered" id="mydata" ng-controller="myCtrl">
                    <thead class="colorBlue">
                        <tr>
                            <th>S.No</th>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="">
                        <tr ng-repeat="x in roleList | filter:searchText">
                            <td>{{x.Id}}</td>
                            <td>{{x.name}}</td>
                            <td>
                                <i class="edit fa fa-pencil-square-o" id="edit{{x.Id}}" ng-click="edit{{x.Id}}"></i>
                                <i class="update fa fa-floppy-o" id="update{{x.Id}}" ng-click="update{{x.Id}}"></i>
                                <i class="editCancel fa fa-times" id="editCancel{{x.Id}}" ng-click="cancel{{x.Id}}"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>

script for second table

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', function ($scope, $http) {
                    $scope.values = {

                    };
                    $http.post("/Admin/getRolesList")
                    .then(function (response) {                     
                        $scope.roleList = response.data;
                      });
                })
</script>

Answer 1

Finally got an answer:

<script>
    var app=angular
                .module("intranet_App", [])
                .controller('myCtrl', ["$scope","$http", function ($scope, $http ,myFactory) {
                    $scope.items = [];

                    $scope.addItem = function (item) {
                        $scope.items.push(item);
                        //$scope.oRoles = $scope.item
                        $scope.json = angular.toJson($scope.item);
                        console.log($scope.json)

                    }

                    $scope.myFunc = function (item) {debugger

                        $scope.addItem(item);
                        var requestHeaders = {
                            "Content-Type": 'application/json'
                        }
                        var httpRequest = {
                            method: 'POST',
                            url: '/Admin/RolesInsert',
                            headers: requestHeaders
                        };

                        httpRequest.data = $scope.json;
                        $http(httpRequest).then(function (response) {
                            alert(response)
                            //$window.location.href = '/Admin/RoleList';
                        })
                    }

                }])
</script>

Answer 2

One of the ways of doing this is:

angular.module("intranet_App", [])
    .controller('myCtrl', function ($scope, $http, myFactory) {
       ...
        function sendDataToBackend() {
            var requestHeaders = {
                "Content-Type": 'application/json'
            }
            var httpRequest = {
                method: 'POST',
                url: 'your url',
                headers: requestHeaders
            };
            httpRequest.data = $scope.items;
            $http(httpRequest).then(function (response) {
                //Handle the response from the server
            })
        }
    }