Angular controller from imported module isn't working

Question

I am trying to use controller from a module imported in my app but the controller callback function is never invoked. I am missing something here have been researching it from hours and can't figure it out where am I mistaken?

Here's a fiddle for your convenience : https://jsfiddle.net/06vz8bu8/

HTML

<main ng-app="itemlist" class="itemlist">        
    <div ng-repeat="item in items">
      {{item.name}} : {{item.info}}
    </div>
</main>  

js

 var Module = angular.module('itemlist', [
   'itemlistControllers'
 ]);

 var CtrlModule = angular.module('itemlistControllers', []);

 CtrlModule.controller = ('listController', ['$scope'], function ($scope) {
   $scope.items = [
     {name: 'Foo', info: 'moo'}
   ];
 });

Appreciate your kind help

Answer 1

What about this (see code comments):

 // .controller = ( <--- what was that????
 // In addition, explicit injections using this approach requires
 // both injected service/provider names and function in the same array
 CtrlModule.controller('listController', ['$scope', function ($scope) {
   $scope.items = [
     {name: 'Foo', info: 'moo'}
   ];
 }]);

In your HTML, you need to explicitly set the controller using ng-controller directive unless you use something like UI Router or ngRoute:

<main ng-app="itemlist" class="itemlist" ng-controller="listController">