title: How to update angular data without refreshing the page?
body: <p>I have some data in a database table that I used angular to show it. And I use the following script <em>which is in the footer</em> to do that:</p>
  
  <pre><code> &lt;script !src=""&gt;
  var app = angular.module('enterprise', []);
  
  app.controller('entercontroller', function($scope, $http){
  
      $scope.loadData= function(){
  
          $http.post('&lt;?php echo base_url(); ?&gt;Groups_/load_data')
              .then(function(mydata){
                  console.log(mydata);
  
                  $scope.datas = mydata.data;
  
              });
      };
      $scope.loadData();
  });
  &lt;/script&gt;  
  </code></pre>
  
  <p>And my load_data() function in my controller like:</p>
  
  <pre><code> public function load_data(){
      $data["groups"] = $this-&gt;Groups-&gt;fetch_groups();
      return $this-&gt;output
      -&gt;set_status_header(200)
      -&gt;set_content_type('application/json', 'utf-8')
      -&gt;set_output(json_encode($data["groups"], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES));
  }
  </code></pre>
  
  <p>And my view is some inputs with submit button. What I need is when I click on the button to add a new record the table is automatically updated without refreshing the page each time. So I make another script to do so</p>
  
  <pre><code> &lt;script&gt;
  $(document).ready(function() {
  $('#add').on('submit', function() {
      var that = $(this);
      $dataString = that.serialize();             
      $.ajax({
          url: '&lt;?php echo base_url(); ?&gt;'+ $("#uri").val() ,
          type: 'POST',
          dataType: 'json',
          cache:false,
          data : $dataString,
          success: function (data) {
              console.log(data);
              $('#message').html(data['message']);
              $(':input','#add')
                .removeAttr('checked')
                .removeAttr('selected')
                .not(':button, :submit, :reset, :hidden, :radio, :checkbox')
                .val('');
          },
          error: function (data) {
              console.log('error');
              console.log(data);
          }
      });
      return false;            
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML code like:</p>
  
  <pre><code>&lt;div class="page-wrapper" ng-app="enterprise" ng-controller="entercontroller"&gt;
  &lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-block"&gt;
                      &lt;form class="floating-labels m-t-40" method="post" id="add" action="addgroup"&gt;
                          &lt;div class="form-group m-b-40"&gt;
                              &lt;input type="text" name="group_title" class="form-control input-lg" id="input8" required&gt;&lt;span class="bar"&gt;&lt;/span&gt;
                              &lt;label for="input8"&gt;Group Name&lt;/label&gt;&lt;br /&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group m-b-40"&gt;
                              &lt;input type="text" name="group_link" class="form-control input-lg" id="input7" required&gt;&lt;span class="bar"&gt;&lt;/span&gt;
                              &lt;label for="input7"&gt;Link&lt;/label&gt;
                          &lt;/div&gt;
  
                          &lt;div class="form-group m-b-40"&gt;
                              &lt;select name="group_icon_code" class="custom-select form-control" id="location1" required &gt;
                                  &lt;option value=""&gt;Icon&lt;/option&gt;
                                  &lt;?php
                                  if(isset($icons))
                                      foreach($icons as $icon)
                                          echo '&lt;option value="'.$icon-&gt;icon_value.'"&gt;'.$icon-&gt;icon_name.'&lt;/option&gt;';
                                  ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
  
                          &lt;div class="text-xs-right"&gt;
                              &lt;input type="hidden" id="uri" name="uri" value="Groups_/addgroup" /&gt;
                              &lt;button type="submit" ng-click="loadData()" name="add" value="1" class="btn btn-success"&gt; &lt;i class="fa fa-check"&gt;&lt;/i&gt; save&lt;/button&gt;
                              &lt;button type="reset" class="btn btn-inverse"&gt; &lt;i class="fa fa-times"&gt;&lt;/i&gt; cancel&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
              &lt;div class="card"&gt;
                  &lt;div class="card-block"&gt;
                      &lt;div class="table-responsive"&gt;
                          &lt;table class="table color-bordered-table inverse-bordered-table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;title&lt;/th&gt;
                                      &lt;th&gt;link&lt;/th&gt;
                                      &lt;th&gt;order&lt;/th&gt;
                                      &lt;th&gt;icon&lt;/th&gt;
                                      &lt;th class="text-nowrap"&gt;control&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  &lt;tr ng-repeat="d in datas"&gt;
                                      &lt;td&gt;{{ d.group_title }}&lt;/td&gt;
                                      &lt;td&gt;{{ d.group_link }}&lt;/td&gt;
                                      &lt;td&gt;{{ d.group_order }}&lt;/td&gt;
                                      &lt;td&gt;&lt;i class="mdi {{ d.group_icon_code }}"&gt;&lt;/i&gt;&lt;/td&gt;
                                      &lt;td class="text-nowrap"&gt;
                                          &lt;a href="#" data-toggle="tooltip" data-original-title="Edit"&gt; &lt;i class="fa fa-pencil text-inverse m-r-10"&gt;&lt;/i&gt; &lt;/a&gt;
                                          &lt;a href="#" data-toggle="tooltip" data-original-title="Delete"&gt; &lt;i class="fa fa-close text-danger"&gt;&lt;/i&gt; &lt;/a&gt;
                                      &lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to put angular script in the on click function but it doesn't work.
  What I need is to reload the same location again after adding.
  Any ideas.</p>