Node and Angular - getting a resource to post to the server

I'm a noob to angular and trying to use a resource to get data bound to my formData object into a mongoDB collection.

I'm using ui-router, which is also new to me, and this is from a nested form.

I'm able to capture the data from the form, and post it, but Dev tools tells me that it's just pending which I don't understand. I'm also a little confused about how my resource connects to the database. can anyone clarify?

Below are my files:

server.js

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');

//Creates the appointments Schema for the User details

var appointmentSchema = new mongoose.Schema({
  name: String, 
  email: { type: String, unique: true },
  password: String, 
  address1: String,
  address2: String,
  postcode: String,
  phone: String,
  appontment_date: String
});

var appointment = mongoose.model('Appointment', appointmentSchema);

mongoose.connect('mongodb://localhost', function(err){
    if (err){
        console.log("Connection Error: ", err);
    }else {
        console.log("Connection Success");
    }
});
var app = express();
app.set('port', process.env.PORT || 3000);
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.get('/api/appointments', function(req, res, next) {
  console.log(req.params);
});

app.post('/api/appointments', function(req, res, next) {
  console.log(req.body);
});

app.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

The Factory:

angular.module('formApp')
.factory('Appointment', function($resource){
return $resource('/api/appointments/:id');
});

The controller:

angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', function($scope, Appointment) {

    // we will store all of our form data in this object
    $scope.formData = {};
    $scope.formData.appintment_date = "";
    $scope.opened        = false;
    /*$scope.momentDate = moment($scope.formData.date);*/
    $scope.time1 = new Date();
    $scope.showMeridian = true;
    //Datepicker
    $scope.dateOptions = {
        'year-format': "'yy'",
        'show-weeks' : false, 
        'show-time':true
    };

    // function to process the form
    $scope.processForm = function() {
         var date = moment($scope.formData.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
            /*console.log(date);*/
            var app = new Appointment($scope.formData);
            app.$save();
    };
}]);

and the definition of the module:

angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker' ])
// configuring our routes 
// 

=============================================================================
    .config(function($stateProvider, $urlRouterProvider) {

        $stateProvider

        // route to show our basic form (/form)
        .state('form', {
            url: '',
            templateUrl: 'views/home.html',
            controller: 'formController'
        })
        // nested states 
        // each of these sections will have their own view
        // url will be nested (/form/profile)
       .state('form.date', {
            url: '',
            templateUrl: 'views/form-date.html'
        })

        // url will be /form/interests
        .state('form.address', {
            url: '/',
            templateUrl: 'views/form-interests.html'
        })

        // url will be /form/payment
        .state('form.payment', {
            url: '/',
            templateUrl: 'views/form-payment.html'
        });

    // catch all route
    // send users to the form page 
    $urlRouterProvider.otherwise('/');
})