title: AngularJs - how to reload page after adding new data to datatable
body: <p>I am very new to angularjs and using angularjs bootstrap datatable. Now when I add new record to my datatable it is being updated in mysql database but I need to reload my page so new record can be displayed in table also but I don't know how to do it. Can anyone please help me? Can I init tableRoleCtrl on success of addRoleData() in ui-bootstrp.js?</p>
  
  <p>Here is my code </p>
  
  <p>ui-bootstrap.js</p>
  
  <pre><code>.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content, tableService) {
  
          //add new role
          $scope.addRole = function(w) {
              tableService.addRoleData(w)
          }
  })
  </code></pre>
  
  <p>table.js</p>
  
  <pre><code>.controller('tableRoleCtrl', function($filter, $sce, ngTableParams, tableService) {
          //var data = tableService.data;
  
          var self = this; 
          var promise = tableService.getRoleData();
          self.data = [];
  
          promise.then(
              function(payload) { 
  
                  self.data = payload.data;
                  //alert(JSON.stringify(self.data));
                  //console.log("test" + self.data)
  
                  self.tableEdit = new ngTableParams({
                      page: 1,            // show first page
                      count: 10           // count per page
                  }, {
                      total: self.data.length, // length of data
                      getData: function($defer, params) {
                          $defer.resolve(self.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                      }
                  });
  
              },
              function(errorPayload) {
                $log.error('failure loading movie', errorPayload);
              }); 
  
          //to updaate data   
          self.updateRole = function(w) {
              tableService.updateRoleData(w); 
          }
  
      })
  </code></pre>
  
  <p>service.js</p>
  
  <pre><code>.factory('tableService', ['$http', function($http){
          var _this = this;
          return { 
  
              // role
              getRoleData: function() {
                  return $http.get("data/getRoles.php");
              },
              updateRoleData: function(w) {
                  $http.post("data/updateRole.php", w)
              },
              addRoleData: function(w) {
                  $http.post("data/addRole.php", w)
              }
          }
      }])
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div data-ng-controller="ModalDemoCtrl"&gt;
      &lt;script type="text/ng-template" id="addrole.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;Add Role&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body m-l-15"&gt;
              &lt;form role="form"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-8"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;span class="input-group-addon"&gt;&lt;i class="zmdi zmdi-account"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;div class="fg-line"&gt;
                                  &lt;input type="text" name="role_title" ng-model="add_role.role_title" class="form-control" placeholder="Title"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br/&gt;
                          &lt;div class=""&gt;
                              &lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="zmdi zmdi-account-circle"&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;select chosen multiple&gt;
                                      &lt;option&gt;Use seetings from&lt;/option&gt;
                                      &lt;option&gt;HR&lt;/option&gt;
                                      &lt;option&gt;Employee&lt;/option&gt;
                                      &lt;option&gt;Admin&lt;/option&gt;
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;br/&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-link" ng-click="ok(); addRole(add_role)"&gt;Submit&lt;/button&gt;
              &lt;button class="btn btn-link" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
  
      &lt;/script&gt;
      &lt;button class="btn btn-default" ng-click="openStatic('addrole')"&gt;Add Roles&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="table-responsive"&gt;
      &lt;table ng-table="tctrl.tableEdit" class="table table-striped" show-filter="true"&gt;
          &lt;tr ng-repeat="w in $data" ng-class="{ 'active': w.$edit }" ng-click="ShowHide12()" style="cursor:pointer"&gt;
              &lt;a href="" ng-click="getSingleRole()"&gt;
                  &lt;td&gt;&lt;span ng-if="!w.$edit"&gt;{{ w.rl_title }}&lt;/span&gt;
  
                      &lt;div ng-if="w.$edit"&gt;&lt;input class="form-control" type="text" ng-model="w.rl_title" /&gt;&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/a&gt;
              &lt;td&gt;
                  &lt;button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = true; "&gt;&lt;i class="zmdi zmdi-edit"&gt;&lt;/i&gt;&lt;/button&gt;&amp;nbsp;
                  &lt;button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="w.$edit = false"&gt;&lt;i class="zmdi zmdi-close"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button type="button" class="btn btn-success" ng-if="w.$edit" ng-click="w.$edit = false; tctrl.updateRole(w)"&gt;&lt;i class="zmdi zmdi-check"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" ng-if="w.$edit" data-ng-click="w.$edit = 0" &gt;&lt;i class="zmdi zmdi-close"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
       &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>