AngularJS: values of defined variables inside controller are not getting displayed correctly

Question

I am learning angular.. I have tried to run a small example through pluralsight, but wasn't able to render correct output.. http://plnkr.co/edit/cYEDSW3FrAKeh1SBjUVN?p=preview HTML

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{text}}</h1>

    <div>
      <div>First name: {{person.firstName}}</div>
      <div>Last name: {{person.lastName}}</div>
      <img ng-src="person.imageSrc" title="{{person.firstName}} {{person.lastName}}">
    </div>
  </body>

</html>

script.js

var MainController = function($scope) {

  var person = {
    firstName: "Ajay",
    lastName: "Sattikar",
    imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"

  };

  $scope.text = "Hello Angular!";
  $scope.person = person;

};

I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. Experts, kindly help...

possible duplicate of Controller not a function, got undefined, while defining controllers globally — PSL
– PSL, Commented Jan 13, 2015 at 22:44
It does not work because pluralsight demo version might be using older version of angular application. — PSL
– PSL, Commented Jan 13, 2015 at 22:44
That code is valid with older versions of angular, but since 1.3 you need to declare the module (see other responses). However try replacing the angular loaded by, let's say, 1.1.5 instead of 1.3.7 and it works. — floribon
– floribon, Commented Jan 13, 2015 at 22:53

Michael Coleman · Accepted Answer · 2015-01-13 22:51:50Z

2

There are a few things that need to be changed in your code

you need to create an angular module

var app = angular.module('app', []);

2 add directive to html element

<html ng-app='app'>

need to register MainController against angular module like this:

app.controller('MainController', function($scope) {

  var person = {
    firstName: "Ajay",
    lastName: "Sattikar",
    imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"

  };

  $scope.text = "Hello Angular!";
  $scope.person = person;

});

Here is a working demo - http://plnkr.co/edit/i9N2OC75EGZwUTDcKtLB?p=preview

edited Jan 13, 2015 at 22:51

answered Jan 13, 2015 at 22:46

Michael Coleman

3,4183 gold badges21 silver badges19 bronze badges

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

4 Comments

SatAj Over a year ago

This works perfect. Thanks. However, one minor issue, the img src is showing as a "person.imageSrc" and not converting into the actual path (i.e. value of "person.imageSrc"), can you please assist?

Michael Coleman Over a year ago

great, if it helps solve your problem you can click the big tick to show other people the working solution. I will take a look at code now and see if I can see the problem

SatAj Over a year ago

Got it.. I missed parenthesis.. {{..}}

Michael Coleman Over a year ago

great, another way that works is to use <img ng-src="http://odetocode.com/{{person.imageSrc}}" ...> and update your javascript accordingly, just whatever is best for your situation

chenop · Accepted Answer · 2015-01-13 22:51:12Z

0

You missed a few steps:

1. Declaring your app

<html ng-app='myApp'>

2. Declaring your controller inside your app module:

angular.module('myApp', [])
 .controller('MainController', function($scope) {

     var person = {
         firstName: "Ajay",
         lastName: "Sattikar",
         imageSrc: "http://odetocode.com/Images/scott_allen_2.jpg"
     };

     $scope.text = "Hello Angular!";
     $scope.person = person;
})

answered Jan 13, 2015 at 22:51

chenop

5,2234 gold badges51 silver badges71 bronze badges

Collectives™ on Stack Overflow

AngularJS: values of defined variables inside controller are not getting displayed correctly

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related