Angular-resource: .$save is not a function

Question

I am using angular $resource. Here is my service:

.factory('EventSubCategory', function($resource) {
  // Might use a resource here that returns a JSON array
  return $resource("http://localhost:3000/api/event_sub_categories");
  // Some fake testing data

})

And here is the controller where I call it:

.controller('ActivityDashboardCtrl', function($scope, $state, EventCategory, EventForm, EventSubCategory) {
  $scope.createSubCategory = function(sub_categories){
    console.log(sub_categories);
    EventSubCategory.$save(sub_categories);
  }
})

However, when i do this I get this error in the browser console:

ionic.bundle.js:25642 TypeError: EventSubCategory.$save is not a function
    at Scope.$scope.createSubCategory (controllers.js:43)
    at fn (eval at <anonymous> (ionic.bundle.js:26457), <anonymous>:4:362)
    at callback (ionic.bundle.js:36610)
    at Scope.$eval (ionic.bundle.js:29158)
    at Scope.$apply (ionic.bundle.js:29257)
    at HTMLFormElement.<anonymous> (ionic.bundle.js:36615)
    at HTMLFormElement.eventHandler (ionic.bundle.js:16583)
    at triggerMouseEvent (ionic.bundle.js:2948)
    at tapClick (ionic.bundle.js:2937)
    at HTMLDocument.tapMouseUp (ionic.bundle.js:3013)

I've tried changing my controller to this:

Answer 1

Make sub_categories a resource instance, then call $save()

var categories = new EventSubCategory(sub_categories);
categories.$save();