Onsen [ng:areq] Argument '' is not a function, got undefined

Question

I know that this question was asked about a hundred of times. And I tried many of the solutions. Sadly none worked for me.

I'm programming with Onsen and AngularJS.

HTML:

    <ons-template id="signin.html">
    <ons-dialog var="dialog">            
        <ons-toolbar>
            <div class="center">Log In</div>
        </ons-toolbar>

        <div class="login-form" ng-app="SignIn" ng-controller="SignCtrl">
            <input type="email" class="text-input--underbar" placeholder="Email" value="">
            <input type="password" class="text-input--underbar" placeholder="Password" value="">
            <br><br>
            <ons-button modifier="large" class="login-button">Log In</ons-button>
            <br>
            <ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
            <ons-button modifier="quiet" class="forgot-password" ng-click="showSignUp()">Not a member?</ons-button>
        </div>

    </ons-dialog>
</ons-template>

Javascipt (js/signctrl.js):

(function(angular){
    // init functions
    'use strict';

    var app = angular.module('SignIn', []);
    app.controller('SignCtrl', function($scope) {
        $scope.showSignUp = function() {       
            alert("foo!");
            ons.createDialog('signup.html').then(function(dialog) { dialog.show(); });
        };
    });

})(window.angular);

And included files:

<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/signin.css">
<link rel="stylesheet" href="css/signup.css">
<link rel="stylesheet" href="css/locations.css">

<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components-sunshine-theme.css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/signctrl.js"></script>

And ons.bootstrap() is called at the beginning (before including the js/signctrl.js).

I would be very happy if you can help me and appreciate your help.

PS: The full error is [ng:areq] Argument 'SignCtrl' is not a function, got undefined

PPS: The real full error:

Error: [ng:areq] Argument 'SignCtrl' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=SignCtrl&p1=not%20a%20function%2C%20got%20undefined
    at file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1460:4931
    at assertArg (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1460:18360)
    at assertArgFn (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1460:18562)
    at file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1462:20613
    at setupControllers (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1461:27741)
    at nodeLinkFn (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1461:28989)
    at compositeLinkFn (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1461:21271)
    at file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1461:19821
    at pre (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1474:25379)
    at invokeLinkFn (file:///data/data/mobi.monaca.debugger/files/projects/cloud/570c898afd17349b6c3d57a4/www/components/loader.js:1462:13182)

Answer 1

It's probably a timing issue. It's trying to access the controller before the element that contains the controller has been initialized. To solve that, wrap your angular code on ons.ready function (see the docs), which will execute your code once onsen has been totally loaded.

For example:

ons.ready(function() {

  //Your angular code

})

Also, it seems that you forgot to add onsen module to your controller.

Hope it solves your issue!