What's wrong with my code?

Hey Sean,

In your original code, the comment I added (everything on that line is what I added). You were missing }).

To answer your other question, I believe your reference to $scope inside of the callback function of dataService.getTodos in your controller is undefined. The reason for this is when you reference variables from the parent class in a callback, the variable loses scope.

Short Answer:

inside of your controller modify this code:

dataService.getTodos(function(response) {
    console.log(response.data);
    $scope.todos = response.data;
  });

to

dataService.getTodos(function(response) {
    console.log(response.data);
    this.todos = response.data;
  }.bind($scope));

Long Answer: Observe the following code and read my comment:

angular.module("todoListApp", [])

.controller('mainCtrl', function($scope, dataService) {
  $scope.learningNgChange = function() {
    console.log("An input changed!");
  };

  $scope.helloWorld = dataService.helloWorld;

  dataService.getTodos(function(response) {
    console.log(response.data);
    $scope.todos = response.data; // This loses scope. because the callback doesn't know that it is inside of a class. and is actually a new object, with no reference to `this` or `$scope`.
  });
})

Why does this happen?

There are 3 levels of scope in Javascript (ES5): Global, Object, and Functional scope. There are 4 levels of scope in Javascript (ES6): Global, Object, Functional, and Block scope.

When you try to call anything inside of a callback that is actually referencing the object (i.e., the controller), you will get an error because you lose scope of the variables you were working with on the object level.

What does this mean?

It means that each level of scope, (Gobal being highest level, and Block being the lowest level) has access to it's parent levels of scope. Block scope has access its parent function, the function has access to its parent object, and everything really has access to global scope, however, if you go backwards, Functional scope does not have access to block scope, each functional scope cannot access variables defined inside of other functions, and Object scope does not have access to variables defined in functional scope.

So if you created a function:

function getName() {
    var firstname = "Joshua";

    if (firstname) {
        var lastname = "Eagle";
    }

   return firstname + lastname;

}

In ES6 for example, the above code would not work as we would expect, because var lastname is inside of the block level scope of the if statement and firstname is inside of the functional level of scope inside of getName() function. However, if I were to change this up.

function getName() {
    var firstname = "Joshua";
    var lastname = "Eagle";
    var fullname = "";

    if (firstname) {
        fullname = firstname + ' ' + lastname;
    }

   return fullname;

}

You will notice I added a fullname, and moved the variable lastname to the top of the function. Now inside of the if statement, I can access fullname from the functional scope and assign it the concatenated values of firstname and lastname.

This is a lot to take in, this is kind of an intermediate explanation. But this is essentially what is happening with your callback function. The callback function is not bound to this controller class that you have defined. So you would have to bind the scope to your callback as stated in the short answer.

If you want more of an explanation and more visuals. look up the following: "levels of scope in Javascript", "Variable Hoisting", "Bind vs. Call Vs. Apply", "Understanding 'this'".

These four concepts while a little tough to initially wrap your head around, you will eventually get it. Just give it time and patience, don't expect to get it the first time, and you will eventually understand it more as you grow as a developer. I know when I first started, I had no idea what any of these concepts were or how they worked. :)