Angular JS: unable to display value

Question

I am a new learner of Angular JS. Please help me to find reason why this demo only display : {{name}} instead of showing each values,

 <!DOCTYPE html>
<html>
    <head>
        <title>AngularJS Demos</title> 
    </head>
    <body> 
        <div class="container" data-ng-app="demoApp" data-ng-controller="SimpleController">
            <h3>Adding a Simple Controller</h3>
            <ul>
                <li data-ng-repeat="name in names">{{name}}</li>
            </ul>
        </div> 
        <script  type="text/javascript">
            var samplesModule = angular.module('demoApp', []); 
            samplesModule.controller('SimpleController', SimpleController);
            function SimpleController($scope) {
                $scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
            }
        </script> 
        <script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
    </body>
</html>

there seems to be no controller or app defined in your HTML – blurfus Apr 30 '16 at 20:00 — blurfus, Apr 30 '16 at 20:00

Pankaj Parkar · Accepted Answer · 2016-04-30T20:16:25.663

2

First thing move angularjs cdn file reference before custom script to make angular object available before using it.

~~Thereafter do add ng-app="samples" on html element & ng-controller="SimpleController" on body tag will solve your issue.~~ (Removed above line as OP modified his code after I answered).

Demo Here

edited Apr 30 '16 at 20:16

answered Apr 30 '16 at 20:00

Pankaj Parkar

134,766
23
234
299

oh ! thanks , My mistake in my original code was `First thing move angularjs cdn file reference before custom script to make angular object available before using it.` – Dan Apr 30 '16 at 20:06
@Ashu you also need to add `ng-app` & `ng-controller` directive to make it working as I suggested in answer..did you looked at plunkr? – Pankaj Parkar Apr 30 '16 at 20:07
Can you please update this New Similar fiddle https://jsfiddle.net/7yejxcu3/9/ ,this is not working, plz tell me reason too – Dan Apr 30 '16 at 20:23
Sure I'll look at it once I will have access to machine.. But ideally you could open new question, as you have already got answer for this question.. – Pankaj Parkar Apr 30 '16 at 20:32
Basically you are following older way of defining controller, do refer [this answer](http://stackoverflow.com/a/28728380/2435473) would solve your issue – Pankaj Parkar Apr 30 '16 at 20:41
1

thanks it worked. I didn't ask new question because I feel it will scam this website by asking similar kind of multiple question. – Dan Apr 30 '16 at 21:19

score 0 · Answer 2 · answered Apr 30 '16 at 20:01

0

You didn't declare the controller and so for the app. Edit as following : <div class="container" data-ng-controller="SimpleController" and <body data-ng-app="samples">

answered Apr 30 '16 at 20:01

Zakaria

14,892
22
84
125

Sajeetharan · Answer 3 · 2016-04-30T20:13:24.007

You have not added ng-app and ng-controller to your View.

   <body > 
        <div ng-app="samples" class="container"  ng-controller="SimpleController">
            <h3>Looping with the ng-repeat Directive</h3>
            <h4>Data to loop through is initialized using ng-init</h4>
            <ul>
                <li data-ng-repeat="name in names">{{name}}</li>
            </ul>
        </div>
   </body>

Here is the working app

score 0 · Answer 4 · answered Apr 30 '16 at 20:10

All you have to do is change the order in your file, no other operations necessary. See below:

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Demos</title> 
    <script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
  </head>
  <body> 
    <script  type="text/javascript">
      var samplesModule = angular.module('demoApp', []); 
      samplesModule.controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
      }
    </script> 
    <div class="container" data-ng-app="demoApp" data-ng-controller="SimpleController">
      <h3>Adding a Simple Controller</h3>
      <ul>
        <li data-ng-repeat="name in names">{{name}}</li>
      </ul>
    </div> 
  </body>
</html>

Angular JS: unable to display value

4 Answers4