Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-repeat to inject HTML for every data element

Steve Fielding
Steve Fielding
7,287 Points
Posted by Steve Fielding
Steve Fielding
7,287 Points

Scope not loading in html

My todo scope is not loading on my page Also my ng-inspector in not working on chrome. Did anyone encounter this problem. Is it a Mac issue?

Below is my code

angular.module('todoListApp', [])
.controller('mainCtrl', function($scope){
        $scope.helloWorld = function(){
        console.log("Hello from the controller.");
    };

        $scope.todos = [
        {"name" : "cleaning the house"},
        {"name" : "Water the Garden"},
        {"name" : "Feed the Dog"},
        {"name" : "Pay the Bills"},
        {"name" : "Go running"},
        {"name" : "Swim"}
        ]


<!doctype html>
<html lang="en">
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link href='styles/main.css' rel='stylesheet' type="text/css">
</head>
<body ng-app="todoListApp">
  <div ng-controller='mainCtrl' class='list'>
  <h1 ng-click="helloWorld()">My TODOS </h1>
  <div ng-repeat="todo in todos">
  <input ng-model="completed" type="checkbox" />
  <label ng-hide="editing" class="edit-label" >{{todo.name}}</label>
  <input ng-show="editing" ng-model="todo.name" type="text" />
  <div class="action">
  <a href="" ng-click = "editing =  !editing "> Edit </a>
  <a href="" ng-click ="helloWorld()"> Save </a>
  <a href=""> Delete</a>
  </div>
  </div>
  {{todos}}
  </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
  <script src="scripts/hello-world.js" type="text/javascript"></script>
</body>
</html>

});
Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

Is that all in one file, or is it just a copy-pates error? It looks like the HTML is in the controller but it should be a separate file.

5 Answers

Nelisa Loreto
Nelisa Loreto
5,436 Points
Nelisa Loreto
Nelisa Loreto
5,436 Points

I had to add a semi colon after my array declaration to get it to work

Steve Fielding
Steve Fielding
7,287 Points
Steve Fielding
Steve Fielding
7,287 Points

Hi Seth, They are in separate files. app.js and index.html

carolechang
.a{fill-rule:evenodd;}techdegree
carolechang
iOS Development Techdegree Student 10,425 Points

yeah

Dazeran Zamri
Dazeran Zamri
5,992 Points
Dazeran Zamri
Dazeran Zamri
5,992 Points

I am having this issue too, already tried Nelisa's suggestion but still the array is not appearing

Dazeran Zamri
Dazeran Zamri
5,992 Points
Dazeran Zamri
Dazeran Zamri
5,992 Points

Ok i manage to fixed it by changing the name of the root folder, 2nd time this has managed to fix an issue. Didn't alter the code whatsoever

Anthony Kelly
Anthony Kelly
15,649 Points
Anthony Kelly
Anthony Kelly
15,649 Points

I moved the array expression inside of the controller and it is now working for me. Previously the console was saying "$scope not defined".

angular.module("todoListApp", [])

.controller('mainCtrl', function($scope) {
  $scope.helloWorld = function() {
    console.log("Hello there! This the helloWorld controller function, in the mainCtrl!");
  };
  $scope.todos = [
      {"name": "clean the house"},
      {"name": "water the dog"},
      {"name": "feed the lawn"},
      {"name": "pay dem bills"},
      {"name": "run"},
      {"name": "swim"}
    ];
});```
Magdalena Górecka
Magdalena Górecka
10,620 Points
Magdalena Górecka
Magdalena Górecka
10,620 Points

I changed the order and it works: <h1>My TODO List</h1> <div class="list" ng-controller="mainCtrl"> <div ng-repeat="todo in todos">