title: updating model and binding update operations with UI
body: <p>I currently have developed a table of content using AngularJS, the table will populate based on an Angular Service "Model" which invokes a web service and returns list and using ng-repeat and creating a table and all its content. </p>
  
  <p>Everything at the moment works fine, I have a minor problem though. Part of the table, we are outputting an action button which when clicked invokes a web service which update the current record. Am trying to make the record data gets updated automatically, but i must refresh the page in order to see the changes. </p>
  
  <p>Here is my code </p>
  
  <p>My app.js</p>
  
  <pre><code>angular.module('my_vehicles', ['vehicleServices', 'AccountsDirectives']);
  </code></pre>
  
  <p>service.js</p>
  
  <pre><code>'use strict';
  
  angular.module('vehicleServices', ['ngResource']).
      factory('Car', function($resource) {
          return $resource('/vehicle/api/car.json/:id', {},
              {
                  query:   {method:'GET',     isArray:false},
                  delete:  {method:'DELETE',  isArray:false},
                  update:  {method:'PUT',     isArray:false}
              }
          );
  });
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>'use strict';
  
  function MyVehicleController($scope, Car) {
  
      var init = function() {
          $scope.page_has_next = true;
          $scope.cars = [];
          $scope.page = 1;
      };
  
      // initialize values
      init();
  
  
      Car.query({my_vehicle: true},
          // success
          function(data) {
              $scope.page_has_next = data.has_next;
              $scope.cars = data.objects;
          },
          // error
          function(data) {
  
          }
      );
  
  
      $scope.mark_sold = function(id, index) {
          Car.update({
              id      : id,
              status  : 'S'
          },
          function(data) {
  
          });
      }
  
      $scope.delete = function(id, index) {
          Car.delete(
              {id: id},
              // on success
              function() {
                  // remove the element from cars array and it will be
                  // automatically updated by ng-repeat
                  $scope.cars.splice(index, 1);
                  $scope.loadMore(1);
              }
          );
      }
  
      $scope.is_total_zero = function() {
          return !!($scope.cars.length)
          //return $scope.cars.length &gt; 0 ? true : false
      }
  
  
      $scope.loadMore = function(limit) {
          if($scope.page_has_next) {
              $scope.$broadcast('loading_started');
              console.log(limit);
              Car.query({my_vehicle: true, page: $scope.page, limit: limit},
                  // success
                  function(data) {
                      $scope.page_has_next = data.has_next;
                      $scope.cars = $scope.cars.concat(angular.fromJson(data.objects));
                      $scope.page++;
                      $scope.$broadcast('loading_ended');
                  },
                  // error
                  function() {
                      $scope.page_has_next = false;
                      $scope.$broadcast('loading_ended');
                  }
              );
          }
      }
  
  
      $scope.$on('loading_started', function() {
          $scope.state = 'loading';
      });
  
      $scope.$on('loading_ended', function() {
          $scope.state = 'ready';
      });
  
  
  }
  </code></pre>
  
  <p>and finally, my html code</p>
  
  <pre><code>                    &lt;tr ng-repeat="car in cars"&gt;
                          &lt;td&gt;&lt;a href="{% ng car.get_absolute_url %}"&gt;{% ng car._get_model_display.make_display %} {% ng car._get_model_display.model_display %} {% ng car._get_model_display.trim_display %}&lt;/a&gt;&lt;/td&gt;
                          &lt;td&gt;{% ng car.created_at_format %}&lt;/td&gt;
                          &lt;td&gt;{% ng car.view_count %}&lt;/td&gt;
                          &lt;td ng-model="car.status_label"&gt;{% ng car.status_label %}&lt;/td&gt;
                          &lt;td&gt;
                              &lt;div class="btn-group"&gt;
                                  &lt;button ng-disabled="car.status == 'S' || car.status == 'P'" ng-model="edit" class="btn btn-mini edit-btn"&gt;{% trans 'Edit' %}&lt;/button&gt;
                                  &lt;button ng-disabled="car.status == 'S'" ng-click="delete(car.id, $index)" class="btn btn-mini delete-btn"&gt;{% trans 'Delete' %}&lt;/button&gt;
                                  &lt;button ng-disabled="car.status == 'S' || car.status == 'P'" ng-click="mark_sold(car.id, $index)" class="btn btn-mini edit-btn"&gt;{% trans 'Mark as sold' %}&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  </code></pre>
  
  <p>P.S the {% ng XXX %} is outputting {{ XXX }}, am using the above syntax because django templating engine does not allow me to use {{}} so i've developed a templatetag that would output {{}} .. </p>
  
  <p>As mentioned earlier, my problem is that every time I invoke "mark as sold" it would invoke the cars.update() but it will not update the record displayed, must refresh to see changes. Any idea how i can solve this?</p>