title: Delete item from data-bound JSON list using AngularJs
body: <p>I have a list of messages which are bound as an HTML list from a JSON source.  There is a delete button next to each image.  I'd like to remove a message from the list when the delete button next to that message is clicked.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
      &lt;ul ng-controller="MessagesCtrl"&gt;
          &lt;li ng-repeat="message in messages.data" id="message{{message.id}}"&gt;
              &lt;a href="#" class="messageIcon"&gt;{{message.message}}&lt;/a&gt; 
              &lt;a ng-click="deleteItem()"&gt;x&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    var myApp = angular.module("myApp", []);
      myApp.factory("Messages", function () {
      var Messages = {};
      Messages.data = [
          {
              id: "1",
              message: "Message 1"
          },
          {
              id: "2",
              message: "Message 2"
          },
          {
              id: "3",
              message: "Message 3"
          },
          {
              id: "4",
              message: "Message 4"
          }
      ];
      return Messages;
  });
  
  function MessagesCtrl($scope, Messages) {
      $scope.messages = Messages;
  
      $scope.deleteItem = function () {
          var id = this.message.id;
          //alert(id);
          Messages.data.delete({ id: id }, function () {
              $("#message" + id).fadeOut();
          });
      }
  </code></pre>
  
  <p>}</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/L82S7/">http://jsfiddle.net/L82S7/</a></p>
  
  <p>The examples I've found to do this use either '.delete' or '.splice' - both of which yield console errors like this:</p>
  
  <pre><code>TypeError: Object #&lt;Object&gt; has no method 'splice'
  </code></pre>
  
  <p>Can anyone suggest how to get this working?</p>
  
  <p>Thanks!</p>