Error: message.$delete is not a function

Question

I'm trying to send a DELETE request by using the angular-resource service, but I keep getting the following message in dev tools:

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@https://code.jquery.com/jquery-1.12.4.min.js:3:9156

I notice that the angular-resource is missing here. Is there a reason for this?

This is the module with the controller:

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 < $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 && $scope.currentMessage.$get) {
            $scope.currentMessage.$get();
        }
        $scope.currentMessage = {};
        $scope.displayMode = "list";
    }

    $scope.listMessages();
});

This is the view with the ng-click that SHOULD send a DELETE request:

<div ng-repeat="message in messages">
<div class="data-tables read-{{ message.read }}">
    <div class="data-tables-rows">
        <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">
            <label></label>
        </div>
        <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">
            <p style="white-space: nowrap; width: inherit; overflow: hidden;text-overflow: ellipsis;"><b>message</b><br />
            {{ message.message }}
            </p>
        </div>
        <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">
            <p><b>date</b><br />
            <date>{{ message.dateReceived | date }}</date>
            </p>
        </div>
        <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">
                    <p><b>Points</b><br />
                    {{ message.metadata }}</p>
                </div>
        <div class="data-table-delete">
            <button ng-click="deleteMessage(message)">Delete</button>
        </div>
    </div>

    <div class="collapse" id="collapse_disclaimer_data-table_message-center_{{ $index }}">
        <div class="data-tables-rows">
            <div class="data-tables-spacer" style="visibility:hidden;">
                <input id="data-table-icon" type="checkbox" />
                <label for="data-table-icon"></label>
            </div>
            <div class="well">
                <div class="data-table-message">
                    <p><b>Message</b><br />
                    {{ message.message }}</p>
                </div>
                <div class="data-table-points visible-xs">
                    <p><b>Points</b><br />
                    {{ message.metadata }}</p>
                </div>
            </div>
            <div class="data-tables-spacer">
            </div>
        </div>
    </div>
</div>

The message comes from CDN served JSON:

{

"_embedded": {
    "messages": 
        {
            "id": 8,
            "message": "You received points",
            "dateReceived": "2016-08-01T00:00:00.000+0000",
            "read": false,
            "metadata": "50"
         }
     }
}

Firefox in debugger option 'Selection to watch expression' doesn't appear to reveal anything abnormal as the object data is listed. Please help!

Answer 1

Thank you Joaozito Polo, you helped us figure it out. var newMessage is the new object from resource. Here is the new listMessages function:

$scope.listMessages = function () {
        $scope.foo = $scope.messagesResource.get();
        $scope.foo.$promise.then(function (data) {
            $scope.messages = [];
            for(var i = 0; i < $scope.foo._embedded.messages.length; i++) {
                var obj = $scope.foo._embedded.messages[i];
                var newMessage = new $scope.messagesResource(obj)
            $scope.messages.push(newMessage);
            }
        });
    }