AngularJS errors - “controller is not defined” or “not a function got undefined”

Question

I am creating an AngularJS controller with an ng-app, but it is not working properly .

In the Chrome console I get either the error angular ctrl is not defined or not a function got undefined .

ng-app:

var localizationModule = angular.module("localizationModule",[]);

Controller.js

 localizationModule.controller('localizationCtrl', ['$scope',
function ($scope) {
$scope.local = {
   ProjectSingular: '',
    ProjectPlural: '',
    ServiceObjectSingular: '',
    ServiceObjectPlural: '',
    ServicePictureSingular: '',
    ServicePicturePlural: '',
}

$scope.Save = function (local) {
    console.log(local);
}
}])

html

<form ng-app="localizationModule" ng-controller="localizationCtrl">
<div class="panel panel-info">
    <div class="panel-heading">
        <strong>Localization Setting</strong>
    </div>
    <div class="panel-body">

        <div class="row">
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <tr>
                            <th>Elements</th>
                            <th>Singular</th>
                            <th>Plural</th>
                        </tr>
                        <tr>
                            <td>Project</td>
                            <td><input type="text" required ng-model="local.ProjectSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ProjectPlural" class="form-control" /></td>
                        </tr>
                        <tr>
                            <td>Service Object</td>
                            <td><input type="text" required ng-model="local.ServiceObjectSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ServiceObjectPlural" class="form-control" /></td>
                        </tr>
                        <tr>
                            <td>Service Picture</td>
                            <td><input type="text" required ng-model="local.ServicePictureSingular" class="form-control" /></td>
                            <td><input type="text" required ng-model="local.ServicePicturePlural" class="form-control" /></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="panel-heading">
        <input type="submit" class="btn btn-success pull-right" value="Save" />
        <div class="clearfix"></div>
    </div>
</div>
</form>

Chrome Console

Error: [ng:areq] http://errors.angularjs.org/1.2.17/ng/areq?p0=localizationCtrl&p1=not%20a%20function%2C%20got%20undefined at Error (native) at http://localhost:1914/Scripts/angular.min.js:6:450 at Cb ( http://localhost:1914/Scripts/angular.min.js:19:130 ) at Sa ( http://localhost:1914/Scripts/angular.min.js:19:217 ) at http://localhost:1914/Scripts/angular.min.js:66:451 at http://localhost:1914/Scripts/angular.min.js:53:250 at q ( http://localhost:1914/Scripts/angular.min.js:7:386 ) at N ( http://localhost:1914/Scripts/angular.min.js:53:115 ) at g ( http://localhost:1914/Scripts/angular.min.js:47:82 ) at http://localhost:1914/Scripts/angular.min.js:46:256

Answer 1

Works fine with the script inlined: jsFiddle , so the timing of script loading is suspicious, as commented above.

(btw. the closing </form> looks missing :)

Answer 2

I have noticed a minor bug in angular. Do you have the declaration of the module in the same file as the controller? Id try to declare the module in every controller file but without the dependency injection array.

angular.module("localizationModule").controller('localizationCtrl', ['$scope',
function ($scope) {
$scope.local = {
   ProjectSingular: '',
    ProjectPlural: '',
    ServiceObjectSingular: '',
    ServiceObjectPlural: '',
    ServicePictureSingular: '',
    ServicePicturePlural: '',
}

$scope.Save = function (local) {
    console.log(local);
}
}])

Bes sure to wrap the file as an ioife too.

(function(){

//---code--

})();