Error: $controller:ctrlreg The controller with the name '{0}' is not registered

All we need is an easy explanation of the problem, so here it is.


'use strict';

    .module('app', ['ngRoute', 'ngCookies'])

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider){
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.html',
            controllerAs: 'vm'


(function () {
'use strict';

    .controller('HomeController', HomeController);

HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {

    $rootScope.bodylayout ='main_page_que';
    var vm = this;


var app = angular.module('app', []);
app.controller('RedCtrl', function($scope) {
  $scope.OpenRed = function() {
$scope.userRed = !$scope.userRed;
$scope.userBlue = false;
  $scope.HideRed = function() {
$scope.userRed = false;
  $scope.OpenBlue = function() {
$scope.userBlue = !$scope.userBlue;
$scope.userRed = false;
  $scope.HideBlue = function() {
$scope.userBlue = false;


<div ng-controller="RedCtrl">
    <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" ng-click="OpenRed()" hide-red="HideRed()">Show Red</a>
    <div hide-red="HideRed()" class="loginBox" ng-show="userRed"></div>
    <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" ng-click="OpenBlue()" hide-blue="HideBlue()">Show Blue</a>
    <div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"></div>


    <html lang="pl" ng-app="app">
<body class="{{bodylayout}}">
<div class="content">
    <div ng-view style="margin:auto"></div>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src="home.js"></script>
<script src="app.js"></script>
<script src="authentication.service.js"></script>
<script src="flash.service.js"></script>
<script src="user.service.local-storage.js"></script>
<script src="home/home.controller.js"></script>   

Hey, this is part from application when I use ngRoute and dynamically add home.html, but I think I have wrong app.js or home.controller.js beacuse when I add external file home.js (when is ng-controller=""RedCtrl. I get error [$controller:ctrlreg] RedCtrl is not register. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You are overwriting app module in home.js thus getting the error


var app = angular.module('app'); //Get previously defined module

instead of

var app = angular.module('app', []); //It declares new module

You also need to change the sequence of JavaScript files

<script src="app.js"></script>
<script src="home.js"></script>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply