Unable to push "todos" (add new task)

Question

When following the video, I was able to add the text "Add a New Task", but I'm unable to see the creation of the task when clicking on + Add a New Task.

app.js

angular.module("todoListApp", [])

.controller('mainCtrl', function($scope, dataService) {
  $scope.addTodo = function() {
    var todo = {name: "This is a new todo."};
    $scope.todos.push(todo);
  };

  $scope.helloWorld = dataService.helloWorld;

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

  $scope.deleteTodo = function(todo, $index) {
    dataService.deleteTodo(todo);
    $scope.todos.splice($index, 1);
  };

  $scope.saveTodo = function(todo) {
    dataService.saveTodo(todo);
  };
})
.service('dataService', function($http) {
  this.helloWorld = function() {
    console.log('This is the hello console service!');
  };

  this.getTodos = function(callback) {
    $http.get('mock/todos.json')
    .then(callback)
  };

  this.deleteTodo = function(todo) {
    console.log("The " + todo.name + " todo has been deleted!")
    // other logic
  };

  this.saveTodo = function(todo) {
    console.log("The " + todo.name + " todo has been saved!")
    // other logic....
  };

});

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 ng-click="helloWorld()">MegaNote</h1>
  <div ng-controller="mainCtrl" class="list">
    <div class="add">
      <a href="" ng-click="addTodo()">+ Add a New Task</a>
    </div>
    <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited}" ng-repeat="todo in todos">
      <input ng-model="todo.completed" type="checkbox"/>
      <label ng-hide="editing" class="editing-label" ng-click="hellowWorld()">{{todo.name}}</label>
      <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
      <div class="actions">
        <a href="" ng-click=" editing = !editing">Edit</a>
        <a href="" ng-click="saveTodo(todo)">Save</a>
        <a href="" ng-click="deleteTodo(todo, $index)" class="Delete">Delete</a>
      </div>
    </div>
    {{todos}}
  </div>
  <script src="vendor/angular.js" type="text/javascript"></script>
  <script src="scripts/app.js" type="text/javascript"></script>
</body>
</html>

I'm also not able to see anything in the console when I click Save in the app. If anyone has a solution here, I'd much appreciate it!

Welcome to the Treehouse Community

Looking to learn something new?

shaunhoyes

shaunhoyes

Unable to push "todos" (add new task)