AngularJS Simple Controller not working

Question

I was trying to run a simple Angular example using a controller. However, it doesn't seem to work.

Here is the HTML:

    <!DOCTYPE html>
    <html ng-app = "app">
    <head>
        <title></title>
        <script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/my.js"/> 
    </head>
    <body>
    <label for = "fname">Name:</label><input type="text" id="fname" ng-model="name"/>{{name}}
    <div class="container" ng-controller="SimpleController">
        <ul>
            <li ng-repeat="hero in heroes">{{hero.name}} - {{hero.city}}</li>
        </ul>
    </div>
    </body>
    </html>

The Script my.js is :

angular.module("app",[]).controller('SimpleController',[function ($scope){
    $scope.heroes = 
    [
        {name:"Bruce Wayne", city:"Gotham"},
        {name:"Kal-El", city:"Metropolis"},
        {name:"Barry Allen", city:"Central City"},
        {name:"Kara Jor-El", city:"National City"},
        {name:"Shazam", cuty:"Fawcett City"}
    ];

}]);

On my local system, the ng-model directive works. But the controller doesn't. I'm using 1.4.x (stable) Angular js.

I tried other question posted and did what the answers suggest, still no result. So what am I doing wrong here?

Created a fiddle as well. Though in the fiddle, even ng-model isn't working.

To fix the fiddle, add ng-app="app" attribute to your opening <body> tag — eronisko
– eronisko, Commented Feb 5, 2016 at 7:46
Updated your fiddle jsfiddle.net/yk8vs0ua/4. you just need to add ng-app to body tag — Narendra CM
– Narendra CM, Commented Feb 5, 2016 at 7:47
@Narendar CM, thanks for fixing the fiddle guys. That was really silly of me.. :) — neo.one
– neo.one, Commented Feb 5, 2016 at 10:16

aayush shrestha · Accepted Answer · 2016-02-05 08:06:28Z

4

You haven't injected $scope properly into your controller. You have to put '$scope' in the array. Try this :

angular.module("app",[]).controller('SimpleController',['$scope', function ($scope){
// Your Stuff
}]);

ADDED COMMENT

While its perfectly okay to pass the controller function as the second argument like the other answers in the thread, I would recommend this method (where we are passing an array with dependencies and controller function) if you want to minify your code during production.

Minifiers will frequently change variable names during minification process, this method makes sure that your dependencies will still work after that.

edited Feb 5, 2016 at 8:06

answered Feb 5, 2016 at 7:50

aayush shrestha

1,9182 gold badges17 silver badges33 bronze badges

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

2 Comments

neo.one Over a year ago

Well, it worked flawless. Thanks :) So the guide I was following, suggested '$scope' can be passed directly as an argument. I believe it was the case with earlier versions. Correct?

aayush shrestha Over a year ago

@neo.one to pass $scope directly, you pass the controller function directly as the second argument instead of array. When you pass an array as second argument, you pass arguments in this manner

Stepan Suvorov · Accepted Answer · 2016-02-05 08:20:40Z

3

if you are using modern version of AngularJS I would suggest to use ControllerAs syntax:

<div class="container" ng-controller="SimpleController as simpleController">
    <ul>
        <li ng-repeat="hero in simpleController.heroes">{{hero.name}} - {{hero.city}}</li>
    </ul>
</div>

and in JS:

angular.module("app",[]).controller('SimpleController',function (){
    this.heroes = [
        {name:"Bruce Wayne", city:"Gotham"},
        {name:"Kal-El", city:"Metropolis"},
        {name:"Barry Allen", city:"Central City"},
        {name:"Kara Jor-El", city:"National City"},
        {name:"Shazam", cuty:"Fawcett City"}
     ];

  }]);

edited Feb 5, 2016 at 8:20

answered Feb 5, 2016 at 7:53

Stepan Suvorov

26.3k27 gold badges117 silver badges178 bronze badges

1 Comment

dendimiiii Over a year ago

<li ng-repeat="hero in simpleController.heroes">{{hero.name}} - {{hero.city}}</li> you mean i guess

aitnasser · Accepted Answer · 2016-02-05 07:53:09Z

1

your controller should be like:

 angular.module("app",[]).controller('SimpleController',function ($scope){
    $scope.heroes =  [
      {name:"Bruce Wayne", city:"Gotham"},
      {name:"Kal-El", city:"Metropolis"},
      {name:"Barry Allen", city:"Central City"},
      {name:"Kara Jor-El", city:"National City"},
      {name:"Shazam", cuty:"Fawcett City"}
    ];
});

answered Feb 5, 2016 at 7:53

aitnasser

1,2661 gold badge9 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS Simple Controller not working

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related