how to refresh and rebind the data from db in angularjs

Question

hi all iam using angularjs ngrepeat to bind the datas into table.i have one add new button when i click bootstrap model popup open i fill the input details click submit means data will stored correctly but table couldn't not get the new data but once i reload the page data will show

my controller code

var refresh = function () {
        $http.get('/ViewFacility').success(function (response) {
            $scope.ViewFacilitys = response;


    };

    refresh();

My add new code:

$scope.AddRole = function () {

        $http.post('/AddNewRole', $scope.Role).success(function (response) {

            refresh();
        });
    };

Html Code

  <form name="profileform">
            <div class="modal fade" id="myModal" role="dialog" ng-controller="IndexController">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content" style="margin-top:135px">
                        <div class="modal-header">

                            <h4 class="modal-title ">Role Name</h4>
                        </div>
                        <div class="modal-body">

                            <h4>Name</h4>
                            <input type="text" name="RoleName" class="form-control" ng-model="Role.RoleName">
                            <span class="error" ng-show="profileform.FirstName.$invalid && profileform.FirstName.$dirty">Please enter a First Name</span>

                            <h4>Description</h4>
                            <input type="text" name="Description" class="form-control" ng-model="Role.Description">
                            <span class="error" ng-show="profileform.LastName.$invalid && profileform.LastName.$dirty">Please enter a Last Name</span>

                            <h4>IsActive</h4>
                            <input type="checkbox" name="IsActive" class="form-control checkbox" ng-model="Role.IsActive" style="margin-left:-47%" >
                            <span class="error" ng-show="profileform.Email.$invalid && profileform.Email.$dirty">Please enter a Email</span>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" ng-click="AddRole()" ng-disabled="profileform.$invalid">Submit</button>&nbsp;&nbsp;
                            <button class="btn btn-primary" data-dismiss="modal" ng-click="deselect()">Clear</button>&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </div>
        </form>

Answer 1

Just add the new item to the array.

$scope.AddRole = function () {
    $http.post('/AddNewRole', $scope.Role).success(function (response) {
       $scope.ViewFacilitys.push($scope.Role);
    });
};

You don't need to fetch all data each time you create a new item. Refresh must be called just one time.

For pagination you can code a simple function that send the number of page to the server:

$scope.changePage = function (page) {
    $scope.get('/ViewFacility?page='+page)
       .then(function (response) {
          $scope.ViewFacilitys = response.data;
       });
}

Answer 2

Try modifying your refresh function like so

var refresh = function () {
        $http.get('/ViewFacility').success(function (response) { //assuming this only fetches the newly added one
            $scope.ViewFacilitys.push(response);
    };