how to refresh a table/grid in the AngularJS implementation with ngDialog Popup

when i try to  add a new row to the grid with ngDialog modal popup,  the grid never refresh to show the new row after the ngDialog is closed. I debug it with console.log to view the data in Chrome.

the data array did update with new record. However the grid did not show the new record.

the trick is we must use the submit action in the form to trigger the anglarJS ng-repeat bindding update.


before the modification, the data array had been update with ng-click.

ngDialog.open({
            template: '\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="saveCustomer()" >Confirm</button>\
            </div>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true
        })

Finally the table can be refreshed with the following code. and highlight the change in Bold.

we had to use the form with ng-submit action to update the data array and trigger the date binding on the ng-repeat table.

ngDialog.open({
            template: '\
                     <form ng-submit="saveCustomer()">\
                    <h2 class="underline">Add New Customer</h2>\
                     <p class="red">{{addCustomerError}}</p>\
                    <table>\
                        <tr>\
                            <td>\
                                CustomerName:<br />\
                                <input type="text" ng-model="customerFormData.dealerIdName" />\
                            </td></tr>\
                            <tr><td>\
                                street:<br />\
                                <input type="text" ng-model="customerFormData.mailAddress1" />\
                            </td></tr>\
                            <tr><td>\
                                City:<br />\
                                <input type="text" ng-model="customerFormData.mailCity" />\
                                 </td></tr>\
                            <tr><td>\
                                Province:<br />\
                                <input type="text" ng-model="customerFormData.mailProvince" />\
                            </td></tr>\
                              <tr><td>\
                                Postal Code:<br />\
                                <input type="text" ng-model="customerFormData.mailPostCode" />\
                            </td></tr>\
                            <tr><td>\
                                Phone:<br />\
                                <input type="text" ng-model="customerFormData.phone" />\
                            </td></tr>\
                    </table> <br />\
                <div class="ngdialog-buttons">\
                    <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog(0)">Cancel</button>\
                    <button type="submit" class="ngdialog-button ngdialog-button-primary" >Confirm</button>\
            </div></form>',
            className: 'ngdialog-theme-plain custom-width',
            scope: $scope,
            plain: true

        })