angular JS service is null inside the controller

Question

This is my first learning project for angular js.

i have created a controller(EditEventsController) and a service(eventData). Code for the EditEventController is

'user strict'
eventsApp.controller("EditEventController",
    function EditEventController($scope,eventData) {
        $scope.saveEvent = function (event, newEventForm, eventData) {
            if (newEventForm.$valid) {
                eventData.save(event);
            }
        }
    });

and that of the eventData service is

eventsApp.factory('eventData', function ($q, $resource) {
    var resource = $resource('data/event/:id.js', { id: '@id' });
    return {
        getEvent: function () {
            return {...}
        },
        save: function (event) {
            event.id = 999;
            var deferred = $q.defer();

            resource.save(event,
                function (response) { deferred.resolve(response); },
                function (response) { deferred.reject(response); });

            return deferred.promise;
        }
    };
});

Html page where im using this controller is named newEvent.html and these are the scripts im adding

<script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-sanitize.js"></script>
    <script src="lib/angular/angular-resource.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers/EditEventController.js"></script>
    <script src="js/services/EventData.js"></script>

    <script src="js/filters.js"></script>

still when im trying to call eventData.save(event). inside the EditEventsController its giving me an error because eventData is null there and therefore i cannot call the save() function.

The complete error in console is

TypeError: Cannot call method 'save' of undefined
    at Object.EditEventController.$scope.saveEvent (http://localhost:9669/app/js/controllers/EditEventController.js:6:27)
    at elementFns (http://localhost:9669/app/lib/angular/angular.js:6365:19)
    at ngEventDirectives.(anonymous function) (http://localhost:9669/app/lib/angular/angular.js:12987:13)
    at Object.$get.Scope.$eval (http://localhost:9669/app/lib/angular/angular.js:8057:28)
    at Object.$get.Scope.$apply (http://localhost:9669/app/lib/angular/angular.js:8137:23)
    at Object.ng.config.$provide.decorator.$delegate.__proto__.$apply (http://localhost:9669/app/newEvent.html:855:30)
    at HTMLButtonElement.ngEventDirectives.(anonymous function) (http://localhost:9669/app/lib/angular/angular.js:12986:17)
    at event.preventDefault (http://localhost:9669/app/lib/angular/angular.js:1992:10)
    at Array.forEach (native)
    at forEach (http://localhost:9669/app/lib/angular/angular.js:130:11)

What am i doing incorrectly here? im sure this is something small

Answer 1

Below should work according to me because you are overriding the eventData again in inner function which might not be passed correctly.

'user strict'
eventsApp.controller("EditEventController",
    function EditEventController($scope,eventData) {
        $scope.saveEvent = function (event, newEventForm) {
            if (newEventForm.$valid) {
                eventData.save(event);
            }
        }
    });