Unknown provider Error when trying to inject dependency on Angular controller

Question

I'm trying to inject "modal" directive in my userMenuController the following way:

angular.module('mgApp.controllers').controller('userMenuController', ['$scope', 'modals', function($scope, modals) { ... }])

Here's modals.js:

angular.module('mgApp.directives').directive('modals', function(){ ... })

And on app.js, app is defined like this:

var app = angular.module('mgApp',['templates', 'angularUtils.directives.dirPagination', 'mgApp.filters', 'mgApp.directives', 'mgApp.services', 'mgApp.controllers']);

But I keep getting this error:

Error: [$injector:unpr] Unknown provider: modalsProvider <- modals <- userMenuController

What am I missing?

Answer 1

a quick thought: make sure you have included all .js files as

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

in index.html file