title: Error: $controller:ctrlreg The controller with the name '{0}' is not registered
body: <p><strong>app.js</strong></p>
  
  <pre><code>(function(){
  'use strict';
  
  angular
      .module('app', ['ngRoute', 'ngCookies'])
      .config(config)
  
  config.$inject = ['$routeProvider', '$locationProvider'];
  function config($routeProvider, $locationProvider){
      $routeProvider
          .when('/', {
              controller: 'HomeController',
              templateUrl: 'home/home.html',
              controllerAs: 'vm'
          })
  }
  })();
  </code></pre>
  
  <p><strong>home.controller.js</strong></p>
  
  <pre><code>(function () {
  'use strict';
  
  angular
      .module('app')
      .controller('HomeController', HomeController);
  
  HomeController.$inject = ['UserService', '$rootScope'];
  function HomeController(UserService, $rootScope) {
  
      $rootScope.bodylayout ='main_page_que';
      var vm = this;
  }
  })();
  </code></pre>
  
  <p><strong>home.js</strong></p>
  
  <pre><code>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;
    };
  });
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;div ng-controller="RedCtrl"&gt;
      &lt;a href="#" ng-click="OpenRed()" hide-red="HideRed()"&gt;Show Red&lt;/a&gt;
      &lt;div hide-red="HideRed()" class="loginBox" ng-show="userRed"&gt;&lt;/div&gt;
      &lt;a href="#" ng-click="OpenBlue()" hide-blue="HideBlue()"&gt;Show Blue&lt;/a&gt;
      &lt;div hide-blue="HideBlue()" class="loginBoxBlue" ng-show="userBlue"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>    &lt;html lang="pl" ng-app="app"&gt;
  &lt;body class="{{bodylayout}}"&gt;
  &lt;div class="content"&gt;
      &lt;div ng-view style="margin:auto"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  &lt;script src="//code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.angularjs.org/1.6.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.angularjs.org/1.6.0/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"&gt;&lt;/script&gt;
  &lt;script src="home.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;script src="authentication.service.js"&gt;&lt;/script&gt;
  &lt;script src="flash.service.js"&gt;&lt;/script&gt;
  &lt;script src="user.service.local-storage.js"&gt;&lt;/script&gt;
  &lt;script src="home/home.controller.js"&gt;&lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hey, this is part from application when I use ngRoute and dynamically add <code>home.html</code>, but I think I have wrong app.js or home.controller.js beacuse when I add external file <code>home.js</code> (when is <code>ng-controller=""RedCtrl</code>. I get error <code>[$controller:ctrlreg] RedCtrl is not register</code>. Have you ideas why? I am new in Angular and I think the main reason is lack of my knowledge.</p>