title: AngularJS service http success function using wrong "this" scope
body: <p>The success function of a <code>$http.put</code> doesn't have access to the <code>this</code> scope of the service it's being called inside. I need to update a property of the service in the call back from the PUT request.</p>
  
  <p>This is a cut down example of what I'm trying to do in a service:</p>
  
  <pre><code>var myApp = angular.module('myApp', function($routeProvider) {
  // route provider stuff
  }).service('CatalogueService', function($rootScope, $http) {
      // create an array as part of my catalogue
      this.items = [];
  
      // make a call to get some data for the catalogue
      this.add = function(id) {
          $http.put(
              $rootScope.apiURL,
              {id:id}
          ).success(function(data,status,headers,config) {
               // on success push the data to the catalogue
               // when I try to access "this" - it treats it as the window
               this.items.push(data);
          }).success(function(data,status,headers,config) {
              alert(data);
          });
      }
  }
  </code></pre>
  
  <p>Sorry if there are some errors in the JS, the main point is how do I access the service scope from inside the success callback?</p>
  
  <p><strong>EDIT</strong> : while the answer to this question was correct, I switched to the <code>factory</code> method as both Josh and Mark recommended it</p>