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](http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally) — PSL, Jan 13 '15 at 22:44
It does not work because pluralsight demo version might be using older version of angular application. — PSL, Jan 13 '15 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, Jan 13 '15 at 22:53

Michael Coleman · Accepted Answer · 2015-01-13T22:51:50.130

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 '15 at 22:51

answered Jan 13 '15 at 22:46

Michael Coleman

3,288
3
19
18

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? – SatAj Jan 13 '15 at 23:02
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 – Michael Coleman Jan 13 '15 at 23:04
Got it.. I missed parenthesis.. {{..}} – SatAj Jan 13 '15 at 23:05
great, another way that works is to use `` and update your javascript accordingly, just whatever is best for your situation – Michael Coleman Jan 13 '15 at 23:10

score 0 · Answer 2 · answered Jan 13 '15 at 22:51

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;
})

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

2 Answers2