I'm playing with AngularJS, but I'm getting an error message: Argument 'Controller' is not a function, got undefined Here's the JSFiddle, and HTML code:

<h2>Hata's Tree-Like Set</h2>
<div ng-app ng-init="N=3;" ng-controller="Controller">
<input type="range" min="1" max="10" step="1" ng-model="N">  
<div class="tree"></div>
</div

Then I define the Controller function in JavaScript, which is not registering for some reason.

function Controller($scope){
$scope.$watch("N", function(){  ... });}

I'm playing with AngularJS, but I'm getting an error message: Argument 'Controller' is not a function, got undefined Here's the JSFiddle, and HTML code:

<h2>Hata's Tree-Like Set</h2>
<div ng-app ng-init="N=3;" ng-controller="Controller">
<input type="range" min="1" max="10" step="1" ng-model="N">  
<div class="tree"></div>
</div

Then I define the Controller function in JavaScript, which is not registering for some reason.

function Controller($scope){
$scope.$watch("N", function(){  ... });}

• javascript
• angularjs

• 1 You can find out your problem, by this checklist: stackoverflow.com/a/26797874/930170 – S Panfilov Commented Nov 14, 2014 at 5:11

10 Answers 10

I had exactly the same error: argument 'HelloCtrl' is not a function, got undefined.

Turns out I had a syntax error in my hello.js file... a missing comma in an array definition, inside HelloCtrl().

I added the comma, and then everything started working!

Hope this helps.

I had the same error... argument 'RadioController' is not a function...

I had referenced the Controller wrong in the HTML. I had

data-ng-controller="RadioController"

when it should have been

 data-ng-controller="Radio.RadioController"

('Radio' is the module the Controller was in)

In the option of your fiddle, you choose to execute your javasctipt onLoad. With the onLoadoption your javascript is added on the window.onLoadfunction :

    window.onload=function(){
       function Controller($scope){
          ...
       }
    }

So angular can not access to your code because it is in a closure.

With the no wrapoption, your code is directly added in the page and is accessible to angular : JSFiddle.

You can browse the source to see how it works.

You can define a controller and register it in one step:

angular.module('myModule').controller('MyCtrl', function($scope) {
  $scope.$watch ....
});

If you want the code to work correctly after it's been minified, you have to explicitly specify the dependency on $scope:

angular.module('myModule').controller('MyCtrl', ['$scope', function(s) { 
  // you can now name the $scope argument whatever you want
  ...
}]);

I was having a hard time with this as well. The cause of my problem was that I had an old version of Angular that didn't support the new as aliasing.

Make sure you have the latest version of Angular that supports as.

Have you configured your $controllerProvider correctly?

From the documentation:

Name of a constructor function registered with the current $controllerProvider or an expression that on the current scope evaluates to a constructor function.

The controller instance can be published into a scope property by specifying ng-controller="as propertyName".

If the current $controllerProvider is configured to use globals (via $controllerProvider.allowGlobals()), this may also be the name of a globally accessible constructor function (not recommended).

Well, I succeeded in solving this error by downgrading to legacy angular JS (1.2.27).

The same syntax (you have used above) for defining controller and angular JS (1.3.2) is the combination which caused this error.

With angular (1.3.2), following syntax worked for me.

var app = angular.module('dummyApp', []);

app.controller('helloController', function($scope){
    <write statements here>
});

There is no need to downgrade to older versions. You can use both the as method or the angular.module method.

Also the order of loading your files has to be correct.

(Consider require js if you have a hard time remembering the order of loading your files)

I had to re-order the script tags. I put the controller higher than another it depends on.

Took me a few hours, hope this helps someone else

I had this error - I'd got the case wrong in the name of my Controller.

It was registered as CallbacksController... took me five minutes of swearing to spot the case difference (hint - capital B in my case!).