Submit a post request from an Angular modal and refresh the main page

I have a main controller with some data (fetched by $http.get), and when you click on one item, it pops up a modal with more details.

In my modal, there is a button to modify the data (sent by $http.post) which then closes the modal and needs to tell the parent controller to refresh the data, because it has been modified by the event in the modal.



NB: if you use my solution - don't forget to add Angular UI bootstrap to your main controller as follows:

var myApp = angular.module('myApp', ['ui.bootstrap']);

HTML

<!--MODAL WINDOW for item details -->
            <script type="text/ng-template" id="itemModalContent.html">
                <div class="modal-dialog ng-hide="hidden">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
                            <span class="item-name">{{item.name}}</span>
                        </div>
                        <div class="modal-body">
                            <p class="description">{{item.description}}</p>
                            <input type="hidden" ng-model="item.uniqueid" id="uniqueid" value="{{item.uniqueid}}" name="uniqueid"/>
                            <p class="response"> {{PostDataResponse}}</p>
                            <p class="error"> {{ResponseDetails}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
                            <button type="button" class="button ok btn-primary" ng-click="confirm()">Submit</button> 
                        </div>
                    </div>
                </div>
            </script>

Angular

 /* main controller - items */
        myApp.controller('itemsCtrl', function ($scope, $rootScope, $http, $uibModal) {
           //wrap $http.get request in a function
            $scope.loadMyData = function () {
                url = '<your_server>';

                $http.get(url).then(function (response) {
                    $scope.items = response.data;
                    $scope.showModal = false;
                    $scope.open = function (item) {
                        $('.overlay').show();
                        var modalInstance = $uibModal.open({
                            controller: "itemsModalInstanceCtrl",
                            templateUrl: 'itemModalContent.html',
                            resolve: {
                                item: function () {
                                    return item;
                                }
                            }
                        });
                    };
                });
            }
            //initial load
            $scope.loadMyData();

            //event listener for refresh_items event
            $rootScope.$on('refresh_items', function (event, data) {
                console.log(data);
                $scope.loadMyData();
            });
        });

/* modal instance - item */
myApp.controller('itemsModalInstanceCtrl', function ($http, $scope, $timeout, $uibModalInstance, item) {
    $scope.item = item;

    $scope.cancel = function () {
        $uibModalInstance.dismiss();
        $('.overlay').hide();
    };

    updateUrl = '<your_webservice_url>';

    $scope.confirm = function () {
        var myitemid = $scope.item.uniqueid;

        // use $.param jQuery function to serialize data from JSON
        var data = $.param({
            uniqueid: myitemid
        });
        var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }

        $http.post(updateUrl, data, config)
           .success(function (data, status, headers, config) {

               $scope.PostDataResponse = "You have successfully submitted your data";
           })
           .error(function (data, status, header, config) {
               $('.response').addClass('error');
               $scope.ResponseDetails = "data: " + data +
                       "<br />status: " + status +
                       "<br />headers: " + header +
                       "<br />config: " + config;
           });
        $timeout(function () {
            $uibModalInstance.close({});
            $('.overlay').hide();
            //tell parent controller to refresh the data
            $scope.$emit('refresh_items', data);
        }, 3000);
    }

});

---

See this on StackOverflow

NB: code is supplied 'as is' without any commitment to it being fit for purpose and is also supplied without any commitment to maintenance or support.