title: How to automatically load/refresh view data after delete in AngularJS?
body: <p>I am working on a Web Application using Laravel as backend API and AngularJS for frontend. I have successfully fetched the data from Laravel API and displayed it via AngularJS ng-repeat. Now i want a delete button for each record which is displayed in the table. When a user click that delete button it should delete the clicked record.</p>
  
  <p>I did the following try which is working perfectly.But the problem occurs when i click delete button it deletes record from database <strong>but it is not refreshing the records list</strong> , instead of refreshing it just shows the headers titles of table and nothing else. When i manually refresh it from browser then it displays back the records list. I want to load the list automatically after the record is deleted.</p>
  
  <blockquote>
    <p>Console Error : Console Error: DELETE
    <a href="http://localhost/ngresulty/public/api/result/50?id=50" rel="nofollow noreferrer">http://localhost/ngresulty/public/api/result/50?id=50</a> 500 (Internal
    Server Error)</p>
  </blockquote>
  
  <p><strong>Before Delete ( List ):</strong></p>
  
  <p><a href="https://i.stack.imgur.com/fmiEf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fmiEf.png" alt="All records list"></a>
  <strong>After delete Scene:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/D8LmP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D8LmP.png" alt="When I press delete , the record is deleted from database but list looks like this"></a></p>
  
  <p><strong>MainCtrl.js</strong></p>
  
  <pre><code>$scope.deleteResult = function(id) {
          $scope.loading = true; 
  
          Result.destroy(id)
                  .success(function(data) {
                      // if successful, we'll need to refresh the comment list
                    Result.get()
                          .success(function(data) {
                              $scope.students = data;
                              $scope.loading = false;
                          });
  
  
                  });
  };
  </code></pre>
  
  <p><strong>MyAppService.js</strong></p>
  
  <pre><code>angular.module('myAppService', [])
  
      .factory('Result', function($http) {
          return {
              get : function() {
                  return $http.get('api/result');
              },
              show : function(id) {
                  return $http.get('api/result/' + id);
              },
              save : function(resultData) {
                  return $http({
                      method: 'POST',
                      url: 'api/result',
                      headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
                      data: $.param(resultData)
                  });
              },
              destroy : function(id) {
                  return $http.delete('api/result/' + id,{params: {id}});
              }
          }
  
  });
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>var myApp = angular.module('myApp', ['mainCtrl', 'myAppService']);
  </code></pre>
  
  <p><strong>Results View :</strong></p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
                              &lt;thead&gt;
                                &lt;tr&gt;
                                  &lt;th&gt;Roll No&lt;/th&gt;
                                  &lt;th&gt;Student Name&lt;/th&gt;
                                  &lt;th&gt;Father Name&lt;/th&gt;
                                  &lt;th&gt;Obtained Marks&lt;/th&gt;
                                  &lt;th&gt;Total Marks&lt;/th&gt;
                                  &lt;th&gt;Percentage&lt;/th&gt;
                                  &lt;th&gt;Delete&lt;/th&gt;
                                &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody ng-hide="loading" ng-repeat="student in students | filter:searchText"&gt;
                                    &lt;tr&gt; 
                                      &lt;td&gt;@{{ student.rollno }}&lt;/td&gt;
                                      &lt;td&gt;@{{ student.name }}&lt;/td&gt;
                                      &lt;td&gt;@{{ student.fname }}&lt;/td&gt;
                                      &lt;td&gt;@{{ student.obtainedmarks }}&lt;/td&gt;
                                      &lt;td&gt;@{{ student.totalmarks }}&lt;/td&gt;
                                      &lt;td&gt;@{{ student.percentage }}&lt;/td&gt;
                                      &lt;td&gt;
                                          &lt;a href="#" ng-click="deleteResult(student.id)" class="text-muted btn-danger btn-lg"&gt;Delete&lt;/a&gt;&lt;/p&gt;
                                      &lt;/td&gt;
  
                                    &lt;/tr&gt;
                               &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>What I tried but not working :</strong></p>
  
  <pre><code> $scope.deleteResult = function(id) {
          $scope.loading = true; 
  
          Result.destroy(id)
              .success(function(data) {
  
                  // do something with data if you want to
                  $scope.students.splice(id, 1);
  
              });
      };
  </code></pre>
  
  <p><strong>Solution :</strong>
  Whenever you get 500 internal error the issue will be from server side. The issue was with server side all i did was change my destroy service to</p>
  
  <pre><code> destroy : function(id) {
                  return $http.delete('api/result/' + id);
  } 
  </code></pre>
  
  <p>and in laravel controller i was returning a bool value true but i changed that to ID </p>
  
  <p><code>return \Response::json($studentid);</code></p>
  
  <p>because i was in need of that ID for success return and then it worked like a charm.</p>