Angular.module is not working - angularjs

Question

I am new to Angularjs and currently practising it .I have a simple example like this .
My View Index.cshtml
<div ng-app="MyApp">
<div class="show-scope-demo">
<div ng-controller="MainController">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController1">
<p>Good {{timeOfDay}}, {{name}}!</p>
<div ng-controller="subController2">
<p>Good {{timeOfDay}}, {{name}}!</p>
</div>
</div>
</div>
</div>
</div>
and my controller is MyJsScript.js
(function (angular) {
angular.module('MyApp', []).controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
angular.module('MyApp', []).controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
in this case I am getting error
"[ng:areq] Argument 'MainController' is not a function, got undefined"
But if I am changing my controller like this
(function (angular) {
var myApp = angular.module('MyApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
$scope.timeOfDay = 'morning';
$scope.name = 'sapan';
}]);
myApp.controller('subController1', ['$scope', function ($scope) {
$scope.name = 'sapan';
}]);
myApp.controller('subController2', ['$scope', function ($scope) {
$scope.timeOfDay = 'Evening';
$scope.name = 'Tapan';
}]);
})(window.angular);
It is working perfectly without any error .
Can anyone please tell me what is the exact difference between these two syntax.

Answer 1

Every time you call
angular.module('MyApp', [])
you're defining a new module named "MyApp" (and thus effectively overwrite the module that was previously defined with the same name).
To get a reference to a previously defined module named "MyApp", the correct syntax is
angular.module('MyApp')
without the array of dependencies.