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) Controllers and Scope Creating a Controller

Posted by Aaron Endsley
Aaron Endsley
Courses Plus Student 17,625 Points

clicking save and nothing is happening...

When I click save the console.log statement does not show in the console. Ive checked the code 15 times, Im sure I'm looking over something but, help would be appreciated.

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 Todos</h1>
  <div ng-controller="mainCtrl" class="list">
    <input type="checkbox"/>
    <label class="editing-label">A sample</label>
    <input class="editing-label" type="text">
    </div>

  <div class="actions">
    <a href="">edit</a>
    <a href="" ng-click="helloWorld()">save</a>
    <a href="" class="delete">delete</a>
  </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
</html>

Javascript Code from my app.js

angular.module("todoListApp", [])
.controller('mainCtrl', function($scope){
  $scope.helloWorld=function(){
    console.log('Hello there this is the hello world controller function in the mainCtrl');
  };
});

7 Answers

Chad Dugas
PLUS
Chad Dugas
Courses Plus Student 13,304 Points
Chad Dugas
Chad Dugas
Courses Plus Student 13,304 Points

Your div.actions needs to be inside of your div.list. Your div.list has the controller with the function helloWorld(). As div.actions is not inside div.list, it cannot access the functions in the controller. 

<div ng-controller="mainCtrl" class="list">
  <input ... />
  <label>...</label>
  <input ... />
  <div class="actions">
    <a href="">edit</a>
    <a href="" ng-click="helloWorld()">save</a>
    <a href="" class="delete">delete</a>
  </div>
</div>
Bappy Golder
Bappy Golder
13,449 Points

Thanks for the fix.

Allison Walker
Allison Walker
17,137 Points
Allison Walker
Allison Walker
17,137 Points

Actually, what happened was that in the first video, Huston puts the new div for actions outside the div for class list. In the second video, they are where they should be, which is inside the div for list.

You did it exactly the way it was demonstrated, from one video to the next.

Bobby Verlaan
Bobby Verlaan
29,538 Points
Bobby Verlaan
Bobby Verlaan
29,538 Points

Hi Aaron,

Think about the explanation about $scope and check whether your actions div is within scope. Feels like our instructor gives us a first test of our understanding this way ;-)

Best, Bobby

Aaron Endsley
PLUS
Aaron Endsley
Courses Plus Student 17,625 Points
Aaron Endsley
Aaron Endsley
Courses Plus Student 17,625 Points

Thank you gentleman, this helped out alot

Stephen Garner
PLUS
Stephen Garner
Courses Plus Student 11,241 Points
Stephen Garner
Stephen Garner
Courses Plus Student 11,241 Points

wow I had this exact same problem. I was driving myself crazy. Who knew it was as simple as a div tag being closed in the wrong place.

Madelyn Petersohn
Madelyn Petersohn
5,005 Points
Madelyn Petersohn
Madelyn Petersohn
5,005 Points

Thank you for this answer! I was going crazy trying to find my error. I feel like I should start making a list of common errors to check through when my code isn't working :)