angular js does not recognize variables in scope

Question

I am new to angularjs infact this is the first time I am using angularjs in one of my applications. The application is developed using django. But what I am trying at the moment is not related to django (i guess), I have a very simple template as follows:

<html xmlns:ng="http://angularjs.org" lang="en" ng-app"><head>
    <title>Testing Angular</title>
    <link rel="stylesheet" type="text/css" href="/static/css/application.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" »="" type="text/javascript">
    </script>
    <script type="text/javascript" src="/static/js/messages.js"></script>
    <script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>
    <script src="/static/js/marketing/app.js"></script>
    <script src="/static/js/marketing/controllers.js"></script>

</head>
<body>
    <div id="content" ng-controller="UserListControl" class="ng-scope">
        [[ users.length ]]
    </div>
</body>
</html>

and following is the content for app.js and controllers.js respectively.

app.js

'use strict';

var newApp = angular.module('newApp', []) 
    .config(function($interpolateProvider){
        // To prevent the conflict of `{{` and `}}` symbols
        // between django templating and angular templating we need
        // to use different symbols for angular.
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

controllers.js

function UserListControl($scope) {
    $scope.users = [   
        {   
            'name' : 'John Doe',
            'type' : 'Platinum',
        },  
        {   
            'name' : 'Matt Hill',
            'type' : 'Gold',
        }   
    ];  
}

but the template simply renders [[ users.length ]] instead of actually rendering the length.

I also tried the ngRepeat directive as follows:

<p ng-repeat="user in users">
    <p>[[user.name]], ([[user.type]])</p>
<p>

and

<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]"><td>[[ i ]]</td></tr>

the first ng-repeat directive renders:

<!-- ngRepeat: usr in users -->
<p ng-repeat="usr in users" class="ng-scope">
        </p>
<p ng-repeat="usr in users" class="ng-scope">
        </p>
<p><a href="#"></a>()</p>
<p></p>

and the second one renders:

<!-- ngRepeat: i in [0, 1, 2, 3, 4, 5, 6, 7] -->
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>
<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]" class="ng-scope"><td>[[ i ]]</td></tr>

why is it not able to recognize the variables ? what am i doing wrong ?

PS:

There are no errors in the console.

Angular Version: 1.0.0
Django Version: 1.4
Web Browser: Google Chrome 24.0.1312.68
Operating System: Ubuntu 12.04

Out of curiosity: has it ever worked with {{}}? What happens if you change your code - just for testing purposes? — Moritz Petersen
– Moritz Petersen, Commented Feb 12, 2013 at 6:22
@MoritzPetersen, If i remove the $.interpolateProvider code and use the default curly braces, nothing is rendered, just the HTML elements are with no values at all. And if i try using other symbols it simply renders it as text instead of rendering varibale values. i am confused phew. — Amyth
– Amyth, Commented Feb 12, 2013 at 6:29
Do you have the same issue if you change the attribute in your html tag to ng-app="newApp"? — Michelle Tilley
– Michelle Tilley, Commented Feb 12, 2013 at 6:33

jlmcdonald · Accepted Answer · 2013-02-12 06:32:55Z

3

In your bootstrapping on the HTML element, the ng-app attribute should look like this:

ng-app="newApp"

That way angular will know to use the module you've defined in your app.js. I just tried it with your code, and the interpolateProvider changes work just fine.

answered Feb 12, 2013 at 6:32

jlmcdonald

13.7k2 gold badges61 silver badges66 bronze badges

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

3 Comments

Amyth Over a year ago

Thanks for your response, i did updated it to use the app name, but it still didn't make a difference.

jlmcdonald Over a year ago

Could you paste in your updated code? It's possible there's another typo somewhere. Also see the answer below about the malformed HTML for your repeater; it should just be <p ng-repeat="user in users"[[user.name]], ([[user.type]])</p>.

Amyth Over a year ago

moving the ngApp directive to another element did the trick :P

jwanga · Accepted Answer · 2013-02-12 06:39:48Z

1

Add an ng-app="newApp", try moving your angular script tag to the bottom of your html body and fix the closing p tag in the first user repeater.

<div ng-app="newApp">
<div id="content" ng-controller="UserListControl" class="ng-scope">
        [[ users.length ]]

        <p ng-repeat="user in users">[[user.name]], ([[user.type]])</p>
</div>
<script src="http://code.angularjs.org/angular-1.0.0.min.js"></script>

See the following fiddle:

http://jsfiddle.net/jwanga/VLRVU/

answered Feb 12, 2013 at 6:39

jwanga

4,2564 gold badges29 silver badges27 bronze badges

Collectives™ on Stack Overflow

angular js does not recognize variables in scope

app.js

controllers.js

PS:

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

controllers.js

PS:

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related