Can't get controller to work in child page using ui-router

Question

I am running into the following error when trying to access a controller in a child page

angular.js:13236 Error: [ng:areq] Argument 'systemInfoController' is not a function, got string

I have the routing set up like below. The routing aspect works fine so to save space I didn't include the whole .config

 .state("admin", {
    url: "/admin",
    templateUrl: "/admin/sideMenu",
    data: {
       requiresLogin : true
    }
  })
  .state("admin.systemInfo", {
     url: "/systemInfo",
     templateUrl: "/admin/systemInfo",
     data: {
        requiresLogin: true
     }
  })          

The sideMenu (parent page) module is defined as follows

angular.module("Admin", ["systemInfo"]);

angular.module("Admin")
   .controller("adminMenuController", ["User", "$http", function (User, $http) {
       var admin = this;
       this.menuOptions = [];

       $http.get('someOtherUrl' + User.language)
            .success(function (data) {
                angular.forEach(data, function (url) {
                    admin.menuOptions.push(url);
                });    
            });
   }]);// end of controller

The systemInfo (the child page) module is defined as follows

angular.module("systemInfo", []);

angular.module("systemInfo")
    .controller("systemInfoController", ["$http"], function ($http) {
        $http.get('someUrl')
         .success(function (data) {
             alert(data);
         });
    });//end of controller

This is how I reference the parent module, this works just fine

<div class="row">
<div>
    <div ng-controller="adminMenuController as menuCtrl" class="col-sm-3">
        <div class="sidebar-nav">
            <div class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <span class="visible-xs navbar-brand">Sidebar menu</span>
                </div>
                <div class="navbar-collapse collapse sidebar-navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="menuItem in menuCtrl.menuOptions">
                            <a href="{{menuItem.Path}}">{{menuItem.Label}}</a>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>
    </div>
</div>
<div ui-view class="col-sm-9"></div>

And I am referencing the child module controller as follows

<div ng-controller="systemInfoController as sysInfCtrl">
    Content Goes Here
</div>

I am able to reach /admin/systemInfo and see the "Content Goes Here" string being rendered but the error message persists. Any help in figuring this out will be appreciated.

Answer 1

You have an error:

.controller("systemInfoController", ["$http"], function ($http) {

You are closing the ] bracket in the wrong place