why am i getting this error in simple angularjs program?

Question

I'm getting this error,

Argument 'ctrl1' is not a function, got undefined

on running the latest angularjs v1.3.15. Should my syntax be any different here?

This is the html

<body ng-app="app">

  <div ng-controller="ctrl1">

      {{color}}

      {{root_color}}

  </div>

  <div ng-controller="ctrl2">

      {{color}}

      {{root_color}}

  </div>

  </body>

And this is the angularjs code

   angular.module('app', []).controller('ctrl1', ['$scope', function ctrl1($scope){

    $scope.color = "yellow";
    $scope.root_color = "red";

   }]);



   angular.module('app', []).controller('ctrl2', ['$scope', function ctrl2($scope){

    $scope.color = "yellow";
    $scope.root_color = "red";

   }]);

Doesn't the second line redefine the app module, thus blowing away the definition of ctrl1? — mbcrute
– mbcrute, Commented Mar 22, 2015 at 13:15
While not the cause of the problem, there is no need to put a name before function. Change 'function ctrl2' to just 'function'. Save a few bytes of typing. — Cerad
– Cerad, Commented Mar 22, 2015 at 13:28

Oliver W. · Accepted Answer · 2015-03-22 13:46:51Z

2

You're overriding the first controller with the 2nd. Use

var app=angular.module('app', []);
//1st controller
app.controller('ctrl1', function ctrl1($scope){

$scope.color = "yellow";
$scope.root_color = "red";

});
//2nd controller
app.controller('ctrl2', function ctrl2($scope){

$scope.color = "yellow";
$scope.root_color = "red";

});

edited Mar 22, 2015 at 13:46

Oliver W.

13.6k3 gold badges41 silver badges52 bronze badges

answered Mar 22, 2015 at 13:16

Dave Jones

3441 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2015-03-22 13:24:28Z

1

You are defining controller ctrl1 in you app then again redefining same app with ctrl2, which was flushing initially defined controller ctrl1.

And on angular side while ng-controller directive gets compiled it doesn't get controller with name ctrl1, so second time while registering second controller you should use only module name like angular.module('app') instead of angular.module('app', [])

Code

angular.module('app', []).controller('ctrl1', ['$scope',
    function ctrl1($scope) {
        $scope.color = "yellow";
        $scope.root_color = "red";
    }
]);

angular.module('app').controller('ctrl2', ['$scope',
    function ctrl2($scope) {
        $scope.color = "yellow";
        $scope.root_color = "red";
    }
]);

Hope this could help you, Thanks.

edited Mar 22, 2015 at 13:24

answered Mar 22, 2015 at 13:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

why am i getting this error in simple angularjs program?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related