Argument with 'controller' is not a function, got undefined - angularjs

Question

I have found similar question but not getting solution so i have post a question.
I have been implementing and displaying data from database in angular js, below is mu code.
index.php file:
<header>
<script type='text/javascript' src='local-path/js/angular.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/angular-route.min.js?ver=4.9.5'></script>
<script type='text/javascript' src='local-path/js/scripts.js?ver=4.9.5'></script>
</header>
<div ng-controller="mycontrollermenu">
First Name: {{firstname}}
</div>
<div ng-view></div>
<footer></footer>
script.js:
var app = angular.module('wp',['ngRoute',' ']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl : localized.partials + 'main.php',
controller : 'Main'
})
.when('/:slug', {
templateUrl: localized.partials + 'content.html',
controller: 'Content'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
app.controller('Main',function($scope, $http, $routeParams){
$http.get('wp-json/wp/v2/posts/').success(function(res){
$scope.posts = res;
});
});
app.controller('Content',
['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
$http.get('wp-json/wp/v2/posts/?slug=' + $routeParams.slug).success(function(res){
$scope.post = res[0];
});
}
]
);
app.filter('removeHTMLTags', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+>/gm, '') : '';
};
});
app.controller('mycontrollermenu',function($scope){
$scope.firstname = "Menu 1";
});
I have added controller mycontrollermenu in to index and js file which is not working, and thow an error like
"Argument 'mycontrollermenu' is not a function, got undefined"
can any one guide me what i have doen wrong in "mycontrollermenu" controller?

Answer 1

Try creating a new .js file like MenuController.js and add the same
app.controller('mycontrollermenu',function($scope){
$scope.firstname = "Menu 1";
});
and in your index.html add <script type='text/javascript' src='MenuController.js'></script>

Answer 2

A couple of questions,
ng-app needs to be there on the root element. Wrap your HTML like <div ng-app="wp">...<div>
localized is a global variable? It is neither injected nor declared.
There is an empty string in the module definition. Forgot to include a dependency?
var app = angular.module('wp',['ngRoute',' ']);
Here I have a fiddle working with your code.