How to refresh automatically Angular UI Grid after adding data

Question

I have angular UI-Grid which I want to reload after the data is added. Please let me know what do I need to add?

HTML File

<form class="form-main">
  <label>Category Name</label>
  <input type="text" id="txtCategory" ng-model="md_catname" />
  <button id="btnAdd" type="submit" class ="button-internal" ng-click="Add()">Add</button>    
  <div class="gridBigStyle" ui-grid="gridCategory" ui-grid-edit ui-grid-pagination>            
</form>

Controller File

var myApp = angular.module('appHome');
myApp.controller("ctrlCategory", ['$scope', 'MetadataOrgFactory', 'CommonFunctionFactory', function ($scope, MetadataOrgFactory, CommonFunctionFactory) {
    $scope.gridCategory = {
        data: 'categoryData',        
        columnDefs: [
            {
                field: 'CategoryName', displayName: 'Name',                
            },           
        ]
    }

    //This is to retrieve existing categories from Database
    MetadataOrgFactory.getApiCall('getallcatgories', function (dataSuccess) {
        $scope.categoryData = dataSuccess;
    }, function (dataError) {
    });

    //Common Function being called to Add Category Name
    $scope.Add = function () {
        var objCategory = {
            'CategoryName': $scope.md_catname,            
        };
        CommonFunctionFactory.AddMasterData(objCategory, function (dataSuccess) {
        }, function (dataError) {
        });
    }
}])

Common Function File

var appService = angular.module('appHome');
appService.factory('CommonFunctionFactory', ['MetadataOrgFactory', function (MetadataOrgFactory) {
    var dataFactory = {};

    //Adding Master Data to DB
    dataFactory.AddMasterData = function (objData) {
        MetadataOrgFactory.postApiCall(serviceFunc, objMasterData, function (dataSuccess) {
            alert("The request has been completed succesfully");
        }, function (dataError) {
    });
    };
}])

I want to understand what code to put so that Angular UI Grid refresh automatically after data add in DB.

Answer 1

Get the full list of updated data as the return of successful updation and , feed the data to the grid, ie $scope.gridOptions.data = latestData;