How to inject controllers in AngularJS?

Question

How do I get this setup to work?

app.js

var app = angular.module('app', ['ui.router', 'app.controllers']);
/* FooCtrl isn't available here, why not? */

controllers.js

var controllers = angular.module('app.controllers', []);
controllers.controller('FooCtrl', function ($scope, $log) {});

index.html

<script src="app.js"></script>
<script src="controllers.js"></script>
<!-- also tried swapping this order -->

http://plnkr.co/edit/rclYeiCepcMwS3CCPl6D?p=preview

Answer 1

You controller is not a global Constructor function, but defined inside module, so you need to use the syntax.

controller: 'FooCtrl'

instead of

controller: FooCtrl