title: How to update a specific value inside ng-repeat in Angular?
body: <p>So I have a code that gets all the products in my api
  :</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>loadProducts();
  
  function loadProducts() {
    $http.get('/api/products').then(function(response) {
      $scope.products = response.data
    });
  }
  
  $scope.Update = function(id) {
    //do update code here and when it succeeds, load products function
    loadProducts();
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;ID&lt;/td&gt;
    &lt;td&gt;Name&lt;/td&gt;
    &lt;td&gt;Action&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr ng-repeat="p in products"&gt;
    &lt;td&gt;{{ p.id }}&lt;/td&gt;
    &lt;td&gt;{{ p.name }} &lt;/td&gt;
    &lt;td&gt;&lt;a ng-click="Update(p.id)"&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The code is working though I have lots of data being loaded that whenever I update a single item, the whole data will be loaded again.</p>
  
  <p>Is there a way that for example, I updated a single item,and it will be the only one being loaded instead of <code>loadProducts();</code> loading everything? </p>
  
  <p>Any help would be much appreciated.</p>