Angular JS: Controller not working

Question

I am doing a simple example but for some reason I am unable to print the value in message variable that I pass through $scope in my controller.

please find my code as give in this fiddle: http://jsfiddle.net/yy3vuzfk/1/

html page code:

<div ng-app>
<div>Hello AJS</div>
<div> Sum of 2 and 3 is: {{ 2 + 3}}
    <div ng-controller="myController">
        Message: {{ message }} 
    </div>
</div>

script.js code

var myController = function($scope){
    $scope.message = "My Message";
};

My output html

Hello AJS Sum of 2 and 3 is: 5 Message: {{ message }}

any help is appreciated

Chad · Accepted Answer · 2015-02-17 00:05:32Z

5

You first need to initalize angular by creating a module and then creating a controller in that module.

You can see this updated fiddle.

angular.module('myApp', [])
  .controller("MyController", function($scope) {
    $scope.message = "My Message Is Super Awesome";
  });

You can find basic examples @ Angularjs.org home page. Look at the "Add Some Control" section on that page.

answered Feb 17, 2015 at 0:05

Chad

864 bronze badges

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

5 Comments

Hari Over a year ago

Hi Chad, thanks for replying. I know, creating a module may solve the issue. But I wanted to know whats wrong in this implementation. here, I have simply created a global JS function and calling it. By all means, it should work. If it cannot work, I wanted to know the reason...

Jonathan Over a year ago

Also, interesting: If I use the Google CDN, it works fine: jsfiddle.net/yy3vuzfk/12

Hari Over a year ago

yup...true. Good observation Jonathan :)

Chad Over a year ago

This may be oversimpifying it, but in JSFiddle I noticed that Angular JS is not set in the Frameworks section in your first JS Fiddle link. It is in mine and Jonathan's. And when setting it, it works. Like I said that may be over simplifiying it. I haven't tested it outside of JSFiddle, but if it works there, I presume it would work other places as well.

Hari Over a year ago

Hey Chad, thanks !!! Actually, it was the onLoad function in the Frameworks & Extensions section which was creating problem. Once you change it to "No wrap - in Head" or "No wrap - in body" it works. Even if you don't specify the Angular JS in Library. Thanks once again ...

Collectives™ on Stack Overflow

Angular JS: Controller not working

html page code:

script.js code

My output html

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html page code:

script.js code

My output html

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related