Controller constructors in global scope are not working

Question

I've seen this basic AngularJS code in a tutorial video which gives the output as expected. But when I try the same code locally it does not work, it shows {{message}} as the output.

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <title></title>
</head>
<body>
    <h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
    <script src="Scripts/angular.min.js"></script>
    <script type="text/javascript">

        function HelloWorldCtrl($scope)
        {
            $scope.message = "First Run...";
        }

    </script>
</body>
</html>

In the console it shows an error,

Argument 'HelloWorldCtrl' is not a function, got undefined

Error: [ng:areq] http://errors.angularjs.org/1.3.0-rc.2/ng/areq?p0=HelloWorldCtrl&p1=not%20a%20function%2C%20got%20undefined

Why this same code behaving differently in different environments? Can someone point out what I'm missing here?

possible duplicate of [Controller not a function, got undefined, while defining controllers globally](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) — PSL, Oct 23 '14 at 15:57

Marian Ban · Accepted Answer · 2014-12-01T16:52:45.710

1

there is something changed in angular1.3.rc2! http://jsbin.com/sumifozawiji/1/edit

i got same error. 1.2.25 works: http://jsbin.com/lanavuvaniva/1/edit

edited Dec 01 '14 at 16:52

answered Sep 18 '14 at 15:30

Marian Ban

8,158
1
32
45

Yes, I have `angular1.3.rc2` in my project, with stable version it works fine, Thanks.... :) – Nalaka526 Sep 18 '14 at 15:37
This is not the proper answer, nothing is "broke" it is a change in the way they want declarations. The old way works if you do this... see http://www.lcube.se/angular-js-controller-error-argument-is-not-a-function/ here is it working... http://jsbin.com/qificutuje/1/edit. That says you should be able to set a setting but I couldn't get that to work. – Jackie Dec 01 '14 at 16:02

score 1 · Answer 2 · answered Sep 18 '14 at 15:43

1

Since Angular v1.3.0-beta defining controller constructors in the global scope is no longer supported.

answered Sep 18 '14 at 15:43

bmleite

26,850
4
71
46

score 0 · Answer 3 · answered Sep 18 '14 at 15:09

Angular will run, it will bootstrap automatically (because of the ng-app attribute) and expects to find a controller named HelloWorldCtrl (due to the ng-controller="HelloWorldCtrl"). But this controller is defined after Angular, so it is not there at the moment of execution.

The simplest solution is to change the order of the scripts, i.e. put your code before Angular.

Controller constructors in global scope are not working

3 Answers3