Cant understand why AngularJS is not producing expected results

Question

here is my code:

<!DOCTYPE html>
<html>

<head>
<title> test </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<h1> Section One </h1>

<div data-ng-app="secOne" data-ng-controller="personController"> <!-- data-ng-init="forename = 'John'" -->
    <p> What is your forename? <input type="text" data-ng-model="forename"> </p>
    <p> What is your surname? <input type="text" data-ng-model="surname"> </p>
    <p> Hello {{ forename }} {{ surname }} </p>
    <p> Enter a number: <input type="number" data-ng-model="numberOne"> </p>
    <p> Enter another number: <input type="number" data-ng-model="numberTwo"> </p>
    <p> Total of numbers: {{numberOne + numberTwo}}</p>
</div>

<h2> Section Two </h2>
<div data-ng-app="secTwo" ng-init="countries=['Australia', 'Rwanda', 'Chad', 'USA', 'UK', 'Peru', 'Japan', 'China', 'Brazil', 'Poland', 'Croatia']" data-ng-controller="controllerTwo">
    <p><input type="text" ng-model="test"></p>

    <ul>
        <li ng-repeat="x in countries | filter:test">
            {{ x.countries }}
        </li>
    </ul>
</div>


<script>
function personController($scope){
    $scope.surname = "Matthews"
}
</script>
</body>
</html>

Firstly, within section one it is printing out Hello {{forename}} {{surname}} even though earlier it was printing out what i typed into the boxes. e.g. If i typed in 'Eric' into forename and then 'Mingo' into surname it would return 'Hello Eric Mingo'.

Secondly in section two, for some weird reason, it prints out {{ x.countries }} so bizarre. even more weird that is working like 5 minutes ago.

Well, if angular fails to load for any reason, it's never going to parse the expressions so they are going to be output directly into the HTML. So you probably should start with looking at the browser console and seeing if there are any script errors. — Claies, Jan 22 '15 at 12:09
Nowhere do you declare `angular.module("secOne", [])`. This is what Angular expects when you do `ng-app="secOne"`. Also, open the browser console, and you'll see the error message. If you also removed `.min` from Angular path, then the error message would be even more descriptive — New Dev, Jan 22 '15 at 12:10
you are missing `angular.module('secOne', []).controller('personController', function($scope) { ... });` — Ifch0o1, Jan 22 '15 at 12:13
@NewDev these are my errors Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=mySecondModule&p1=…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387) angular.js:3896 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=secOne&p1=Error%3A…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387) — BlackMagma, Jan 22 '15 at 13:43
use the full library angular.js instead of angular.min.js when troubleshooting to get errors that are readable. — Claies, Jan 22 '15 at 15:32

score 1 · Accepted Answer · edited May 23 '17 at 11:43

Your problem is that you have two apps in the same page. For example this code works for me:

<head>
<title> test </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<h1> Section One </h1>

<div ng-app ng-controller="personController">
    <p> What is your forename? <input type="text" data-ng-model="forename"> </p>
    <p> What is your surname? <input type="text" data-ng-model="surname"> </p>
    <p> Hello {{ forename }} {{ surname }} </p>
    <p> Enter a number: <input type="number" data-ng-model="numberOne"> </p>
    <p> Enter another number: <input type="number" data-ng-model="numberTwo"> </p>
    <p> Total of numbers: {{numberOne + numberTwo}}</p>
</div>

<script>
function personController($scope){
    $scope.surname = "Matthews"
}
</script>
</body>
</html>

If you need two apps in the same page you can read this question: AngularJS Multiple ng-app within a page

i see what you say and i am trying to implement that. dont get, however, why when i take out all of section 2 (i.e. what you have left in your code above and then run that, it still doesnt work). any ideas? can you check in the console output or something? — BlackMagma, Jan 22 '15 at 13:42

Cant understand why AngularJS is not producing expected results

1 Answers1