title: Adding to a Collection (List) via WebApi POST
body: <p>I am trying to add favourites to a collection - <code>List&lt;Attraction&gt;</code> whenever a user clicks on a link for the desired <code>Attraction</code>.</p>
  
  <p>My Api Controller is as follows:</p>
  
  <pre><code>public class FavouritesController : ApiController
  {
      private List&lt;Attraction&gt; _favourites;
  
      private readonly IRepository _repo;
  
      public FavouritesController(IRepository repo)
      {
          _repo = repo;
      }
  
      public IEnumerable&lt;Attraction&gt; Get()
      {
          return _favourites;
      }
  
      [HttpPost]
      public IHttpActionResult Add(int id)
      {
          if (_favourites == null)
          {
              _favourites = new List&lt;Attraction&gt;();
          }
  
          var attraction = _repo.FindAttractionById(id);
  
          if (attraction == null)
          {
              return BadRequest();
          }
  
          _favourites.Add(attraction);
  
          return Ok();
      }
  </code></pre>
  
  <p>And this is my AngularJS Service:</p>
  
  <pre><code>function addToFavourites(id) {
      $http.post("/api/v1/favourites/" + id)
          .success(function(response) {
             //Success
          })
  </code></pre>
  
  <p>Then in the Angular controller for page:</p>
  
  <pre><code>$scope.addToFavourites = function() {
      dataService.addToFavourites(this.attraction.id);
      $scope.Favourites = dataService.getFavourites();
  }
  </code></pre>
  
  <p>It works when I set breakpoint - but only adds one item to the collection - so if I click on the first item it adds the first item, but then if click on the second item it adds second item, but does not keep the first. </p>
  
  <p>If I do a <code>Get</code> request in browser to <code>localhost:xxxx/api/v1/favourites</code> it just says <code>null</code> in window. How can I fix this and ensure state of the collection remains consistent?</p>