SharePoint/Angular can't delete item - Error 412 - angularjs

Question

Update: I have changed my Services and Controller as follows and am now receiving an Error 412 (HTTP/1.1 412 Precondition Failed). Here is my updated code:
Service:
appServices.factory('appType', ['$resource', function ($resource) {
return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items(:Id)", { Id: "#Id" },
{
'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } },
'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() }, 'IF-MATCH': "*" },
}
);
}]);
Relevant part of Controller:
$scope.removeType = function (type) {
appType.delete({ Id: type.Id });
console.log("Deleted" + type.ID);
}
}]);
Original Post:
I am attempting to delete an item/row in an Angular App built on top of SharePoint 2013, but when I am attempt the delete it appears to process, except nothing is removed from the SharePoint list. Using the network tab in IE, I get a 400 error.
Here is my controller:
appControllers.controller('appSettingsCtrl', ['$scope', 'appTypes', function ($scope, appTypes) {
// Retrieve Types
$scope.types = [];
appTypes.query({}, function (data) {
$scope.types = data.value;
});
// Create Types
var typeEntry = new appTypes;
$scope.addType = function () {
console.log("Clicked");
typeEntry.Title = $scope.itemtype;
typeEntry.$save();
}
// Delete types
$scope.removeType = function (type) {
appTypes.delete({}, { Id: type.ID });
console.log("Deleted" + type.ID);
}
}]);
Here is my HTML:
<table class="table table-striped">
<tr>
<th>Type</th>
<th>
Action
</th>
</tr>
<tr ng-repeat="type in types" id="type{{type.Id}}">
<td>
{{type.Title}}
</td>
<td>
<button type="button" class="btn btn-danger" data-ng-click="removeType(type)">Delete</button>
</td>
</tr>
</table>
Here is my service:
appServices.factory('appTypes', ['$resource', function ($resource) {
return $resource("/_api/web/lists/getbytitle('Todo Types List')/Items", {Id: "#Id" },
{
'query': { method: "GET", isArray: false, headers: { 'Accept': 'application/json;odata=nometadata' } },
'update': { method: 'PATCH', headers: { 'Accept': 'application/json;odata=nometadata' } },
'save': { method: 'POST', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val() } },
'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=nometadata', 'content-type': 'application/json;odata=nometadata', 'X-RequestDigest': $("#__REQUESTDIGEST").val(), 'IF-MATCH': '*' } },
}
);
}]);
Here is some sample JSON:
{
"value": [
{
"FileSystemObjectType": 0,
"Id": 5,
"ID": 5,
"ContentTypeId": "0x01004CE051F4BDBACB43BB22C234F8F497FE",
"Title": "Type 1",
"Modified": "2015-03-13T18:35:09Z",
"Created": "2015-03-13T18:35:09Z",
"AuthorId": 12,
"EditorId": 12,
"OData__UIVersionString": "1.0",
"Attachments": false,
"GUID": "9ceee022-a418-43d4-86b1-1de6d68edc47"
}
]
}

Answer 1

I am using following headers when removing a item from a list.
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"If-Match": "*",
"X-Http-Method": "DELETE".
For me it works. Hope it helps to you too.

Answer 2

Blame this error on having a small typo that malformed the header (The If-Match was outside of the headers:. This is correct:
'delete': { method: 'DELETE', headers: { 'Accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose', 'X-RequestDigest': $("#__REQUESTDIGEST").val(), 'IF-MATCH': '*' } }