Getting header controller not defined error in Angular controller - angularjs

Question

I am getting headercontroller not defined error. I have reference this controller.js file in Index.html and is there anything i am missing
Controller.js
(function () {
'use strict';
angular
.module('myApp')
.controller('headerController', headerController);
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
function headerController($scope, $http) {
var vm = this;
}
})();
app.js
(function () {
var myapp = angular.module('myApp', ["ui.router"]);
myapp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "SOC/Views/route1.html",
controller: "route1ctrl"
})
.state('route2', {
url: "/route2",
templateUrl: "SOC/Views/route2.html",
controller: "route2ctrl"
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
})();
Index.html
<script src="app.js"></script>
<script src="SOC/Directives/Header/controller.js"></script>
I tried even this below code it does not work
angular
.module('myApp', [])
.controller('headerController', headerController);

Answer 1

You are overwrite the dependency of the angular module by providing empty array
angular
.module('myApp', [])
.controller('headerController', headerController);
Remove the array from module('myApp)
angular
.module('myApp')
.controller('headerController', headerController);
Controller.js
(function () {
'use strict';
function headerController($scope, $http) {
var vm = this;
}
headerController.$inject = ['$scope', '$http' ,'$rootScope'];
angular
.module('myApp')
.controller('headerController', headerController);
})();
More about $inject in angularjs - https://docs.angularjs.org/guide/di