Angularjs first attempt at dependency injection-Collection of common programming errors

I have a UserAddController and I want to be able to access a list of countries returned by a Web API. The Web API returns data fine. Here is my app.js where I get the data :

app.factory('Country', function ($resource) {
    return $resource(
        "/api/country/:Id",
        { Id: "@Id" },
        { "update": { method: "PUT" } });  
});

This is my Controller :

var UserAddController = function ($scope, $location, service, User) {

    $scope.action = "Add";
    $scope.countries = service.countries;

};

I am declaring and creating a service here :

app.factory('CountryService', CountryService);

function CountryService($resource) {
    return $resource(
       "/api/country/:Id",
       { Id: "@Id" },
       { "update": { method: "PUT" } });  
}

I am using the same code as above just for testing purposes. I am injecting this service like this :

UserAddController.$inject = ['$scope', 'CountryService'];

This is my first attempt at dependency injection and I cannot figure out where I am going wrong. The error I currently get is ‘service is undefined’. I have tried passing both the service and the Country object to the Controller with the same results. Can anybody give any advice?

EDIT : In my Controller, this populates successfully with an alert in the code, but without the alert does not populate. Any reason why this is?

function CountryService($rootScope, $http) {
    var self = {};

    //self.countries = [{ "$id": "1", "CountryId": 1, "CountryName": "United Kingdom" }, { "$id": "2", "CountryId": 2, "CountryName": "Republic of Ireland" }, { "$id": "3", "CountryId": 3, "CountryName": "Australia" }, { "$id": "4", "CountryId": 4, "CountryName": "New Zealand" }, { "$id": "5", "CountryId": 5, "CountryName": "United States" }, { "$id": "6", "CountryId": 6, "CountryName": "France" }, { "$id": "7", "CountryId": 7, "CountryName": "Germany" }, { "$id": "8", "CountryId": 8, "CountryName": "Finland" }];

    $http({
        method: 'GET',
        url: '/api/country'
    }).success(function (data, status, headers, config) {
        self.countries = data;
    });
    alert(self.countries);
    return self;
}

1. You need to add other services/dependencies.

   UserAddController.$inject = ['$scope', 
                                '$location', 
                                'CountryService', 
                                'UserService'];
   

   I have assumed that last dependency is a service with name ‘UserService’. It’s signature would be

   app.factory('UserService', UserService);
   

   Edit :

   You need to instantiate a new variable.

   //Inside function body
   $scope.countries = service.countries;
   $scope.newCountry = $scope.countries.get({Id : someId},callbackFn);
   

   Now you have a counrtry with ‘someId’ in $scope.newCountry

2. Make sure you injected ngResource.

   app = angular.module("app", ['ngResource']);
   

   You need to inject the modules correcly

   UserAddController.$inject = ['$scope', '$location', 'CountryService', 'user'];
   

   This is quoted the doc.

   You can specify the service name by using the $inject property, which is an array containing strings with names of services to be injected. The name must match the corresponding service ID registered with angular. The order of the service IDs matters: the order of the services in the array will be used when calling the factory function with injected parameters.

   I created a FIDDLE and you can try.

Originally posted 2013-12-02 01:37:25.