22

My angularjs controller function is never called. I see all the js files included in my sources, it's just not ever hitting the initialization of my controller. What is wrong with this code?

eventListCtrl.js:

eventsApp.controller('eventListCtrl', ['$scope', function ($scope) {
 // this code is never called
 alert('controller initializing');
 $scope.name = "Test";
}]);

app.js:

'use strict';
var eventsApp = angular.module('eventsApp', []);

Index.cshtml:

<div ng-controller="eventListCtrl">
 <div class="row">
 <div class="spann11">
 <h2>{{name}}</h2>
 </div>
 </div>
</div>
<script src="/scripts/vendor/angular.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/eventListCtrl.js"></script>
asked Mar 24, 2014 at 15:18
2
  • 6
    Do you have ng-app="eventsApp" anywhere? And did you recreate eventsApp within your controller? Commented Mar 24, 2014 at 15:19
  • Agree with this comment. In case you forgot, put the ng-app outside the <div ng-controller="...">. Commented Mar 24, 2014 at 15:41

4 Answers 4

45

You need to do this 

<html ng-app="eventsApp">

So you actually activate the module

answered Mar 24, 2014 at 15:48
Sign up to request clarification or add additional context in comments.

1 Comment

Doh, not sure how I missed this!
2

I want to post my issue/resolution here in case anyone does the same thing as me. 

<div ng-controller="coolCtrl" ng-if="VAR">

I was trying to init a controller on an element that didn't get created (because of the ng-if="var" )
facepalm

answered Jun 12, 2015 at 0:44

1 Comment

Thank you! I made the same mistake by adding ng-show on the controller wrapper :)
0

Wild guess:

angular.module('eventsApp').controller('eventListCtrl', ['$scope', function ($scope) {
 // this code is never called
 alert('controller initializing');
 $scope.name = "Test";
}]);

in your controller file?

answered Mar 24, 2014 at 15:25

6 Comments

This is exactly what I was thinking when I first saw the question. AngularJS is very trial-by-fire.
This would make no difference, It's identical to what he's doing already
the API on module is just very bad. Adding a second parameter makes it an initializer and people get confused.
@Connor not true. unless he made eventsApp global which would be very bad, in which case the answer still suggesting best practice.
@JoeMinichino it is global, as seen in the post :) and plus, in production it's likely to concatenate your files anyway, and it's not bad practice to have your namespace global
|
0 
<html ng-app="eventsApp">
<div ng-controller="eventListCtrl">
 <div class="row">
 <div class="spann11">
 <h2>{{name}}</h2>
 </div>
 </div>
</div>
<script src="/scripts/vendor/angular.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/eventListCtrl.js"></script>
</html>

This should fix it

answered May 27, 2021 at 19:13

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.