Why am I getting data from an empty mongodb database?

Question

I'm doing a todo application, and in my code I'm using the ng-repeat directive to create as many todoboxes as there are in the database. But in my case even if the database is empty if get five todo boxes. It probably has something to do with my loadData function that I'm calling but I can't figure it out. Here is an image of what I get on my browser combined with the data from the debugger. . When I do a get request on localhost:3000/api/todos I get [] which is right because the database is empty. Any ideas?

Here is my part of my html file:

<div class="row">
  <h1>Things you have to do</h1>
  <li ng-repeat="todo in todos">
    <p id="todobox"> {{ todo.name }} </p>
  </li>
  <form>
    <input type="text" placeholder="I need to do..." ng-model="formData.newTodo" required>
    <button ng-click="addTodo(formData)">Add</button>
  </form>
</div>

Here is my controller:

var app = angular.module('myApp', ['navigationDirective']);

app.controller('MainController', ['$scope','$http', function($scope, $http){
  $scope.formData = {};

$scope.loadData = function(){
  $http.get('/api/todos')
    .then(function(data){
      console.log('Data:' + data);
      $scope.todos = data;
    });
};
//call the loadData function that returns the data from the json file
$scope.loadData();

//Add a new todo to the database
$scope.addTodo = function(){
  $scope.formData = {
    name: $scope.formData.newTodo
  };
  $http.post('/api/todos', $scope.formData)
    .then(function(data){
      console.log($scope.formData.name);
      $scope.todos = data;
      $scope.formData = {};
      console.log(data);
    });
}

}]);

and here is my server.js file:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

//connect to database
mongoose.connect('mongodb://localhost:27017/tododbtest');

// set static files location
// used for requests that our frontend will make
app.use(express.static(__dirname + '/public'));

//app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//define our model for the todos
var Todo = mongoose.model('Todo', {
  name: String,
  //maybe change it to bool later
  //checked: boolean
});

//when I get a get request I'm going to send
//the index.html file
app.get('/', function(req, res){
  res.sendFile( __dirname + '/public/index.html');
});

//get all the todos from the database
app.get('/api/todos', function(req, res){
  Todo.find(function(err, todos){
    if(err)
      res.send(err)
    console.log(todos);
    res.json(todos);
  });
});

//create a todo
app.post('/api/todos', function(req, res){
  console.log("Req.body.name:" + req.body.name);
  Todo.create({name: req.body.name, checked: false},
  function(err, todo){
    if(err) res.send(err);
    Todo.find(function(err, todos){
      if(err) res.send(err);
      res.json(todos);
    });
  });
});

app.listen(3000);

Answer 1

The $http service returns a promise which resolves to a response object. Data is one of the five properties of the response object. Set todos to response.data .

  $http.post('/api/todos', $scope.formData)
    .then(function(response){
      console.log($scope.formData.name);
      $scope.todos = response.data;
      $scope.formData = {};
    });