Angular Service injected not working

I have created and injected the service(myService) into my app (app) , but it is not working. The error implies that I have not defined the service anywhere:

Error: [$injector:unpr] Unknown provider: myServiceProvider <- myService <- myController

myService calls another service - ajaxService to do the actual http call.

The only reason I would think that myService throws the above error when trying to call it in myController is because I have another module defined in the app definition (common.components). This module has its own separate services which I am using elsewhere in my app. I am wondering if the app is searching for a definition of myService within that the common.components module instead of inside itself. Here is my code:

- app.js

var app = angular.module('app ', ['ngRoute','common.components']);

- myService.js

var serviceId = 'myService';
angular.module('app').service(serviceId,['$q','ajaxService','$log',myService]);

function myService($q, ajaxService, $log){
    var states = [];
    this.getStates = function() {
        var defered = $q.defer(); 
        ajaxService.getStates().then(function(result){
            states = result.data;
            defered.resolve(states);
        },
        function(error){
            deferred.reject();
        });
        return defered.promise;


    };

}

- ajaxService.js

var serviceId = 'ajaxService';
angular.module('app',[]).service(serviceId,['$http','$log',ajaxService]);

function ajaxService($http,$log){
  this.getStates = function() {
        return $http.get('./json/DATA.json');
  };   

}

• myController.js

(function(){ 'use strict';

angular.module('app').controller('myController',['$scope','$log','myService',myController]);

function myController($scope,$log,myService){ 

    $scope.states = [];

    myService.getStates().then(function(states){
        $scope.states = states;
    });            
}

})();

I have been trying to find out what is wrong for hours, but I am lost. Can someone help me with this?