user6934713 user6934713 - 9 months ago 66
AngularJS Question

Angular nested controller errror

I am trying to nest controller and I am getting the following error: Error: [ng:areq] Argument 'MainController' is not a function, got undefined. I searched and I sow that there is a similar question but the answer was not applicable to my case.
Thank you for the help in advance


<body ng-controller="MainController" layout="column">
<md-content flex >
<md-toolbar class="md-accent">
<div class="md-toolbar-tools">
<md-content flex layout-align="center center">
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column" id="sideNav">
<section layout="column">
<md-button class="md-raised md-primary">
@Html.ActionLink("Admin", "Index", "Admin/Index", new { area = "" }, new { @class = "myButtons" })
<md-button class="md-raised md-primary" ng-click="clickSide('left')">Show menu</md-button>
<md-content class="AppContainer">
<div layout="row" layout-align="center center">
<h2>My Awesome Footer &copy; @DateTime.Now.Year</h2>

app.js(main controller)

var MyApp = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'ngRoute']);

MyApp.controller('MainController', function ($scope,$rootScope, $http, $filter, $mdDialog, $timeout, $mdSidenav, $window, $location) {
$scope.clickSide = function (dir) {



angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('AdminController', function ($scope, $http, $filter, $mdDialog) {
$scope.test = "Hello";


Answer Source

You do not need to declare the Module again in the AdminController, Change it as follows,

MyApp.controller('AdminController', function ($scope, $http, $filter, $mdDialog) {
$scope.test = "Hello";