title: Angular module error
body: <p>i try to write an angular app using best code practice and i got to this:</p>
  
  <p>index.html file contain : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html ng-app='hrsApp'&gt;
   &lt;head&gt;
  &lt;title&gt;Hrs app&lt;/title&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="homeCtrl"&gt;
  &lt;div class='container'&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src='app.js'&gt;&lt;/script&gt;
  &lt;script src='js/controllers/homeCtrl.js'&gt;&lt;/script&gt;
  &lt;script src='js/controllers/avCtrl.js'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Main file: app.js:</p>
  
  <pre><code>angular.module('home', []);
  angular.module('av', []);
  
  // Declare app level module which depends on filters, and services
  angular.module('hrsApp', [
  'hrsApp.controllers',
  'hrsApp.services',
  'hrsApp.directives',
  'hrsApp.filters',
  
  // AngularJS
  'ngRoute',
  
  // All modules are being loaded here but EMPTY - they will be filled with controllers and      functionality
  'home',
  'av'
  ]);
  
  // configure our routes
  angular.module('hrsApp').config([
  '$routeProvider',
  function ($routeProvider) {
      'use strict';
  
      $routeProvider
          // route for the home page
          .when('/', {
              templateUrl: 'views/home.html',
              controller: 'homeCtrl'
          })
  
          // route for the about page
          .when('/av', {
              templateUrl: 'views/av.html',
              controller: 'avCtrl'
          })
  
          // route for the contact page
          .otherwise({
              redirectTo: '/'
          });
  }
  ]);
  </code></pre>
  
  <p>Then i added the home controller:</p>
  
  <pre><code>/*global angular*/
  
  angular.module('home').controller('homeCtrl', [
   '$scope',
  function ($scope) {
      'use strict';
  
      $scope._init = function () {
          $scope.message = "welcome to Home Ctrl";
      };
  
      // DESTRUCTOR
      $scope.$on('$destroy', function () {
  
      });
  
      // Run constructor
      $scope._init();
  
      $scope.log('info', '[HomeCtrl] initialized');
  }
  ]);
  </code></pre>
  
  <p>and home template that for the moment contain only a binding to the message variable:</p>
  
  <pre><code>&lt;div&gt;{{message}}&lt;/div&gt;
  </code></pre>
  
  <p>When i try to run the application i got : Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.3.0/" rel="nofollow">http://errors.angularjs.org/1.3.0/</a>$injector/modulerr?p0=hrsApp&amp;p1=Error%3A%…googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.0%2Fangular.min.js%3A18%3A3) angular.js:38</p>
  
  <p>Any idea what i do wrong?</p>