AngularJS: $scope not binding to view when using ng-repeat

Question

For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:

<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>

<body>
<div>Hello World!
    <div ng-repeat="movie in movies">
       <p>movie: {{movie.moviename}}</p>
    </div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">

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

function IndexCtrl($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
};
</script>
</body>
</html>

you don't ever seem to be injecting the IndexCtrl into your 'myApp' — beauXjames
– beauXjames, Commented Jan 19, 2015 at 17:31
If the paragraph element is repeated three times then the binding obviously works. Maybe a typo in the expression. Can we assume that this is not the original code? — a better oliver
– a better oliver, Commented Jan 19, 2015 at 17:41
This is the original code. I'm running this on the express server using node.js as a backend but I can't imagine that would cause this problem — brian Scroggins
– brian Scroggins, Commented Jan 19, 2015 at 17:48

brian Scroggins · Accepted Answer · 2015-01-22 00:45:07Z

1

After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.

var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});

To anyone else using a node.js backend and not using jade as a template language, I hope this helps!

answered Jan 22, 2015 at 0:45

brian Scroggins

2,8313 gold badges19 silver badges18 bronze badges

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

1 Comment

rahpuser Over a year ago

Thats interesting.. mustache is server side view engine and process the data in the server.. if the output was valid html/angular the angular should work.. however.. glad you got the answer

Davin Tryon · Accepted Answer · 2015-01-19 17:31:13Z

0

It would be better to explicitly define the controller inside the module:

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

myApp.controller('IndexCtrl', function($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
});

But.... I copied the code exactly, replaced angular resource path. And all is working.

<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>

<body>
<div>Hello World!
    <div ng-repeat="movie in movies">
       <p>movie: {{movie.moviename}}</p>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">

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

function IndexCtrl($scope) {
    $scope.movies = [
      {'moviename':'ironman'},
      {'moviename':'antman'},
      {'moviename':'man'} 
    ];
    console.log($scope.movies);
};
</script>
</body>
</html>

answered Jan 19, 2015 at 17:31

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

8 Comments

JB Nizet Over a year ago

It's actually the only way to make it work in recent versions of Angular, where support for global controllers have been removed.

brian Scroggins Over a year ago

Nope the code above isn't working for me. I copied and paste it in my IDE and i still get hello world with the word movie in a column 3x without the movienames

rahpuser Over a year ago

@brianScroggins which version are you using ? as JB Nizet said.. angular remove global controllers in lasts versions

brian Scroggins Over a year ago

@rahpuser I'm using v.1.2.26

rahpuser Over a year ago

is that your original code? do you have any console error ?

|

Collectives™ on Stack Overflow

AngularJS: $scope not binding to view when using ng-repeat

2 Answers 2

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related