CODEWITHSUNDEEP
angularjsangularjs-scope
brian Scroggins
brian Scroggins

Reputation: 2811

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

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>

Upvotes: 0

Views: 689

Answers (2)

brian Scroggins
brian Scroggins

Reputation: 2811

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!

Upvotes: 1

Davin Tryon
Davin Tryon

Reputation: 67306

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>

Upvotes: 0

Related Questions