AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

Question

I noticed the same question was asked a few times here, I tried so solve it but nothing helps.

I\'m following this tutorial with the egghead videos.

But whe

Answer 1

Watch your letter casing too. I spent a good hour chasing this bug.

<section id="forgotpwd" ng-controller="ForgotPwdController">

while I name the controller

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

They all should be consistently named, in this case ForgotpwdController with lower case p.

Answer 2

I just did this tutorial and followed @gion_13 answer. Still did not work. Solved it by making my ng-app name in the index identical to the one in my js file. Exactly identical, even the quotes. So:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

and the js:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

Weird how the ng-app has to be identical but the ng-controller doesn't.

Answer 3

Firstly - If the module name is not defined, in the JS you will not be able to access the module and link the controller to it.

You need to provide the module name to angular module. there is a difference in using defining module as well 1. angular.module("firstModule",[]) 2. angular.module("firstModule")

1 - one is to declare the new module "firstModule" with no dependency added in second arguments. 2 - This is to use the "firstModule" which is initialized somewhere else and you're using trying to get the initialized module and make modification to it.

Answer 4

sometimes something wrong in the syntax of the code inside the function throws this error. Check your function correctly. In my case it happened when I was trying to assign Json fields with values and was using colon : to make the assignment instead of equal sign = ...

Answer 5

You have 2 unnamed ng-app directives in your html.
Lose the one in your div.

Update
Let's try a different approach.
Define a module in your js file and assign the ng-appdirective to it. After that, define the controller like an ng component, not as a simple function:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

and the js part:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

Here's an online demo that is doing just that : http://jsfiddle.net/FssbL/1/

Answer 6

Me too faced the same issue. But the problem was I forgot to list the module in the list of modules the ng-app depends on.