title: Error: message.$delete is not a function
body: <p>I'm trying to send a DELETE request by using the angular-resource service, but I keep getting the following message in dev tools:</p>
  
  <blockquote>
    <p>Error: message.$delete is not a function
    $scope.deleteMessage@file:///Users/me/Desktop/angular/my-app/loyalty-program_messages-pointstransactions.js:37:13
    anonymous/fn@file:///Users/me/Desktop/angular/my-app/angularjs/angular.js line 14605 > Function:2:329
    expensiveCheckFn@file:///Users/me/Desktop/angular/my-app/angularjs/angular.js:15694:18
    ngEventHandler/https://code.jquery.com/jquery-1.12.4.min.js:3:12392
    n.event.add/r.handle@<a href="https://code.jquery.com/jquery-1.12.4.min.js:3:9156" rel="nofollow">https://code.jquery.com/jquery-1.12.4.min.js:3:9156</a></p>
  </blockquote>
  
  <p>I notice that the angular-resource is missing here. Is there a reason for this?</p>
  
  <p>This is the module with the controller:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngResource'])
  
  .constant("baseUrl1", MY-TESTING-URL-1)
  .config(function($httpProvider) {
      $httpProvider.defaults.withCredentials = true;
  })
  
  myApp.controller("MessagesCtrl", function($scope, $http, $resource, baseUrl1){
  
  
      $scope.displayMode = "list";
      $scope.currentMessages = null;
  
      $scope.messagesResource = $resource(MY-TESTING-URL-1 + ":id?projection=full", { id: "@id" });
  
      $scope.listMessages = function () {
          $scope.foo = $scope.messagesResource.get();
  
          $scope.foo.$promise.then(function (data) {
  
              $scope.messages = [];
              for(var i = 0; i &lt; $scope.foo._embedded.messages.length; i++) {
                  var obj = $scope.foo._embedded.messages[i];
                  $scope.messages.push(obj);
              }
          });
      }
  
      $scope.deleteMessage = function (message) {
          message.$delete().then(function () {
              $scope.messages.splice($scope.messages.indexOf(message), 1);
          });
          $scope.displayMode = "list";
      }
  
      $scope.createMessage = function (message) {
          new $scope.messagesResource(message).$save().then(function(newMessage) {
              $scope.messages.push(newMessage);
              $scope.displayMode = "list";
          });
      }
  
      $scope.updateMessage = function (message) {
          message.$save();
          $scope.displayMode = "list";
      }
  
      $scope.editOrCreateMessage = function (message) {
          $scope.currentMessage = message ? message : {};
          $scope.displayMode = "edit";
      }
  
      $scope.saveEdit = function (message) {
          if (angular.isDefined(message.id)) {
              $scope.updateMessage(message);
          } else {
              $scope.createMessage(message);
          }
      }
  
      $scope.cancelEdit = function () {
          if ($scope.currentMessage &amp;&amp; $scope.currentMessage.$get) {
              $scope.currentMessage.$get();
          }
          $scope.currentMessage = {};
          $scope.displayMode = "list";
      }
  
      $scope.listMessages();
  });
  </code></pre>
  
  <p>This is the view with the ng-click that SHOULD send a DELETE request:</p>
  
  <pre><code>&lt;div ng-repeat="message in messages"&gt;
  &lt;div class="data-tables read-{{ message.read }}"&gt;
      &lt;div class="data-tables-rows"&gt;
          &lt;div class="data-tables-toggle" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details"&gt;
              &lt;label&gt;&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="data-table-message hidden-xs" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details"&gt;
              &lt;p style="white-space: nowrap; width: inherit; overflow: hidden;text-overflow: ellipsis;"&gt;&lt;b&gt;message&lt;/b&gt;&lt;br /&gt;
              {{ message.message }}
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="data-table-date" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details"&gt;
              &lt;p&gt;&lt;b&gt;date&lt;/b&gt;&lt;br /&gt;
              &lt;date&gt;{{ message.dateReceived | date }}&lt;/date&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="data-table-points hidden-xs points-{{ message.metadata }}" type="button" data-toggle="collapse" data-target="#collapse_disclaimer_data-table_message-center_{{ $index }}" aria-expanded="false" aria-controls="collapse_disclaimer_data-table_message-center_{{ $index }}" title="View Details"&gt;
                      &lt;p&gt;&lt;b&gt;Points&lt;/b&gt;&lt;br /&gt;
                      {{ message.metadata }}&lt;/p&gt;
                  &lt;/div&gt;
          &lt;div class="data-table-delete"&gt;
              &lt;button ng-click="deleteMessage(message)"&gt;Delete&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse" id="collapse_disclaimer_data-table_message-center_{{ $index }}"&gt;
          &lt;div class="data-tables-rows"&gt;
              &lt;div class="data-tables-spacer" style="visibility:hidden;"&gt;
                  &lt;input id="data-table-icon" type="checkbox" /&gt;
                  &lt;label for="data-table-icon"&gt;&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="well"&gt;
                  &lt;div class="data-table-message"&gt;
                      &lt;p&gt;&lt;b&gt;Message&lt;/b&gt;&lt;br /&gt;
                      {{ message.message }}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="data-table-points visible-xs"&gt;
                      &lt;p&gt;&lt;b&gt;Points&lt;/b&gt;&lt;br /&gt;
                      {{ message.metadata }}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="data-tables-spacer"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>message</code> comes from CDN served JSON:</p>
  
  <pre><code>{
  
  "_embedded": {
      "messages": 
          {
              "id": 8,
              "message": "You received points",
              "dateReceived": "2016-08-01T00:00:00.000+0000",
              "read": false,
              "metadata": "50"
           }
       }
  }
  </code></pre>
  
  <p>Firefox in debugger option 'Selection to watch expression' doesn't appear to reveal anything abnormal as the object data is listed. Please help!</p>