$scope in AngularJS not working

Question

I have following code which i have got from internet. I have implemented the same code but it is not displaying any data.

HTML

<html data-ng-app="">
<head>
    <title>Example 4: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container" ng-controller="SimpleController">            
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" data-ng-model="name" /><br/>
        <br/>
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script>
        function SimpleController($scope)
        {
            $scope.customers = [
                {name:'John Doe',city:'New York'},
                {name:'John Smith',city:'Pheonix'},
                {name:'Jane Doe',city:'Chicago'}
                ];
        }
    </script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

I have also implemented bootstrap in it just for designing.

Previous example i have seen was this and it was working fine

<html data-ng-app="">
<head>
    <title>Example 3: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body data-ng-init="customers=[{name:'John Doe',city:'New York'},{name:'John Smith',city:'Pheonix'},{name:'Jane Doe',city:'Chicago'}]">
    <div class="container">         
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" ng-model="name" /><br/>
        <br/>
        <ul class="list-group">
            <li class="list-item" data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

This is just my 4th AngularJS example so i have totally 0 knowledge what is happening. Thanks in advance

Any errors in the console? – kamil-mrzyglod Sep 08 '15 at 06:36 — kamil-mrzyglod, Sep 08 '15 at 06:36

score 2 · Answer 1 · answered Sep 08 '15 at 06:46

I believe it's angular 1.2 and > needs to have app initialized:

angular.module('app', []); // can be named whatever you want of course

then place in your ng-app attr:

<html data-ng-app="app">

then you create your controller by either making a new module:

angular.module('App.Controllers', []) // again naming it whatever you want
    .controller('SimpleController', ['$scope', function($scope){
        // do your controller stuff
    }]);

this must be added to the app:

angular.module('app', ['App.Controllers']);

OR you can create it as part of your app:

angular.module('app').controller('SimpleController', ['$scope', function(){
    // NOTICE: I didn't add the [] when using the app module again, this is how you call the module up later on to add things like controllers, directives etc.
}]);

score 1 · Answer 2 · answered Sep 08 '15 at 06:50

Do it like this, you need to initialize your angular app

<html data-ng-app="myapp">
<head>
    <title>Example 4: Using AngularJS Directives and DataBindings</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="Styles/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div class="container" ng-controller="SimpleController">
        <h1>AngularJS Second Program</h1>
        <br/>
        Name:
        <br />
        <input type="text" data-ng-model="name" /><br/>
        <br/>
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="Scripts/angular.min.js"></script>
    <script>

    angular.module('myapp', []).controller('SimpleController', ['$scope',
        function($scope) {
            $scope.customers = [
                {name:'John Doe',city:'New York'},
                {name:'John Smith',city:'Pheonix'},
                {name:'Jane Doe',city:'Chicago'}
                ];

        }
    ]);
    </script>
    <script src="Styles/jquery.min.js"></script>
    <script src="Styles/js/bootstrap.min.js"></script>
</body>

I have changed my src of angular.min.js with "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js" and it worked I have also implemented your code and also worked. and i am bit confused what made it run? — Zaki Mohammed, Sep 08 '15 at 07:39

score 1 · Accepted Answer · answered Sep 08 '15 at 06:50

1

simply your angular.js file is not getting loaded or corrupted, try with cdn link its working fine .

answered Sep 08 '15 at 06:50

anujayk

544
7
31

score 0 · Answer 4 · answered Sep 08 '15 at 06:39

0

Looks like SimpleController isn't defined in app module. Try to name your app lake 'myApp' and define your controller like this:

angular.module('F1FeederApp.controllers', [])
   .controller('simpleController', function($scope) { ...

answered Sep 08 '15 at 06:39

11111000000

193
2
9

$scope in AngularJS not working

4 Answers4