Unable to fetch data from controller in Angular.js

Question

I'm pretty much new to AngularJS. In fact, this is my first day. What I'm trying to do here is to fetch data from a controller I made and show it in the view. But I don't know why, it's not simply working.

My data is a list of students. All I'm trying to do is to show the list of students in a list order and filter the list according to the name entered in a textbox.

My code is pretty simple:

<!DOCTYPE html>
<html ng-app>

  <head>
    <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  </head>

  <body>
    <h1>Hello!</h1>

      Student Name:
     <br />
      <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container" data-ng-controller="simpleController">

      <ul>
        <li ng-repeat="stud in students | filter:sname  | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
      </ul>

    </div>

    <script>
      function simpleController($scope)
      {
        $scope.students=[
               {firstname:'Jordan',lastname:'Rains'},
               {firstname:'Michael',lastname:'Jordan'},
               {firstname:'John',lastname:'Doe'},
               {firstname:'John',lastname:'Smith'},
               {firstname:'Simcha',lastname:'Michelle'},
               {firstname:'Sydney',lastname:'Rivers'},
               {firstname:'Summer',lastname:'Rose'},
               {firstname:'Georgia',lastname:'Schubert'},
               {firstname:'Rosalie',lastname:'Fayadh'}
              ];

      }      
    </script>    
  </body>
</html>

Here's a fiddle.

Luka Jacobowitz · Accepted Answer · 2016-04-03 11:23:14Z

2

You need to register your controller!

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

myApp.controller('simpleController', ['$scope', simpleController]);

And then you also need to put a name into ng-app.

<html ng-app="myApp">

answered Apr 3, 2016 at 11:23

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

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

1 Comment

Smokey Over a year ago

Thanks. I didn't knew about this

Oron Bendavid · Accepted Answer · 2016-04-03 11:26:40Z

I've updated your JSFiddle:

HTML:

<div ng-app="app">
  <div ng-controller="simpleController">
    <h1>Hello Student!</h1>   Student Name:<br/>
    <input type="text" ng-model="sname" /> {{ sname }} 
    <div id="mvvm_communication" class="container">
      <ul>
        <li ng-repeat="stud in students | filter:sname  | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
      </ul>
    </div>
  </div>
</div>

Angular:

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


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

        $scope.students=[
               {firstname:'Jordan',lastname:'Rains'},
               {firstname:'Michael',lastname:'Jordan'},
               {firstname:'John',lastname:'Doe'},
               {firstname:'John',lastname:'Smith'},
               {firstname:'Simcha',lastname:'Michelle'},
               {firstname:'Sydney',lastname:'Rivers'},
               {firstname:'Summer',lastname:'Rose'},
               {firstname:'Georgia',lastname:'Schubert'},
               {firstname:'Rosalie',lastname:'Fayadh'}
              ]; 
});

ronapelbaum · Accepted Answer · 2016-04-03 11:33:34Z

1

you need to define an angular module:

      angular.module('app', []).controller('simpleController', simpleController);

see jsFiddle

answered Apr 3, 2016 at 11:33

ronapelbaum

1,83716 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unable to fetch data from controller in Angular.js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related