Angular.module is not working

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.