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

Posted by Dean Pierrot
Dean Pierrot
18,403 Points

ng-repeat does not work when running on local server

my code is almost the exact copy as the one in this lesson besides i didn't touch the <h1>tag. A few courses back i downloaded ng-inspector but had to run this project thru a local server to get ng-inspector to work. Now when i get to the point where Huston is showing how to use ng-repeat and i go to check it out. Nothing appears. Only thing shows is the <h1> and the gray bar. I'm using atom as my editor and when i open my index file in the browser BOOM everything is working like it show beside the ng-inspector. Any ideas why?

index.html 
<!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">
    <h1>My ToDo's</h1>
    <div ng-controller="mainCtrl"class="list">
      <div ng-repeat="todo in todos"> <!-- sytnax for ng-repeat is someItem in someIterable -->
        <input ng-model="todo.completed" type="checkbox"/>
        <label ng-hide="editing" class="editing-label">{{todo.name}}</label>
        <input ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
      <div class="actions">
        <button ng-click=" editing = !editing">edit</button> <!-- toggles between true/false with the edit button is clicked  -->
        <button ng-click="helloWorld()">save</button>
        <button class="delete">delete</button>
      </div>
    </div>
    {{todos}}
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="scripts/app.js" type="text/javascript"></script>
  </body>
</html>

app.js
angular.module("todoListApp", []) // Second parameter defines the application dependencies also the empty array tells angular to create the application
.controller('mainCtrl', function($scope) {
    $scope.helloWorld = function() {
      console.log("hello controller");
    };

    $scope.todos = [
      {"name": "clean the house"},
      {"name": "water the dog"},
      {"name": "feed the lawn"},
      {"name": "pay dem bills"},
      {"name": "run"},
      {"name": "swim"}
    ]

});