title: Thinkster MEAN stack tutorial, deletion of element
body: <p>I've been following the Thinkster Mean Stack tutorial, and it works wonderfully. So I have created my own project, and so far everything works fine.
  However, they didn't cover how to delete posts. 
  And I can for the life for me not figure out how to delete an element from the data. </p>
  
  <p>AngularApp.js</p>
  
  <pre><code>var app = angular.module('KOL', ['ui.router'])
      .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
          $stateProvider
              .state('home', {
                  url: '/home',
                  templateUrl: "/views/home.ejs",
                  controller: 'kolCtrl',
                  resolve: {
                          patientPromise: ['patients', function(patients) {
                              return patients.getAll();
                          }]
                      }
              })
              .state('details', {
                  url: '/details/{id}',
                  templateUrl: './views/details.html',
                  controller: 'detailsCtrl'
              });
  
              $urlRouterProvider.otherwise('home');
      }])
      .factory('patients', ['$http', function($http){
          var object = {
          patients: []               
  
         };
  
          object.getAll = function() {
              return $http.get('/patients').success(function(data) {
                  angular.copy(data, object.patients);
              });
          }
  
          object.create = function(patient) {
          return $http.post('/patients', patient).success(function(data){
              object.patients.push(data);
          });
      }
  
  
      };
          return object;
      }])
      .controller('kolCtrl', ['$scope', 'patients', 
          function($scope, patients){
  
                $scope.patients = patients.patients;
                $scope.selectedItem = $scope.patients[0];
  
  
                $scope.addPost = function() {
                  if(!$scope.title || $scope.title === '') { return; }
                  if(!$scope.age || $scope.age === '') { return; }
                  patients.create({
                      name: $scope.title,
                      age: $scope.age,
                  })
  
                  $scope.title = '';
                  $scope.age = '';
  
                };
  
  
  
                object.delete = function(patient)            
  
      }])
      .controller('detailsCtrl', [
          '$scope',
          '$stateParams',
          'patients',
          function($scope, $stateParams, patients){
  
  
          $scope.patient = patients.patients[$stateParams.id];
      }])
  
  
  ;
  </code></pre>
  
  <p>Home.ejs</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div clas="row"&gt;
  
              &lt;div style="width: 200px; margin-top: 100px"&gt;
              &lt;select  ng-model="selectedItem" ng-options="patients.name for patients in patients" class="pull-left form-control" name="Vælg"&gt;&lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="viewbox pull-right"&gt;
                  &lt;h3&gt;Patient: {{selectedItem.name}}&lt;/h3&gt;
                  &lt;p&gt;Age: {{selectedItem.age}} &lt;/p&gt;
                  &lt;p&gt;index: {{patients.indexOf(selectedItem)}}&lt;/p&gt;
                  &lt;button&gt;&lt;a href="#/details/{{patients.indexOf(selectedItem)}}"&gt;Rediger&lt;/a&gt;&lt;/button&gt;
                  &lt;button ng-click="deleteItem(patients.indexOf(selectedItem))"&gt;Delete&lt;/button&gt;
              &lt;/div&gt;
  
  
  
  
  
          &lt;/div&gt;
          &lt;div class="row" class="pull-left"&gt;
              &lt;div style="width: 200px; margin-top: 100px"&gt;
              &lt;form  role="form" class="form-group" ng-submit="addPost()"&gt;
                  &lt;input  class="form-control" type="text" ng-model="title" /&gt;
                  &lt;input  class="form-control" type="text" ng-model="age" /&gt;
                  &lt;button type="submit"&gt;Add&lt;/button&gt;
              &lt;/form&gt;
              &lt;/form&gt;
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>index.js (route get and post)</p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  
  
  
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
  });
  
  var mongoose = require('mongoose');
  var Patient = mongoose.model('Patient');
  
  router.get('/patients', function(req, res, next) {
    Patient.find(function(err, patients){
      if(err){ return next(err); }
  
      res.json(patients);
    });
  });
  
  router.post('/patients', function(req, res, next) {
    var patient = new Patient(req.body);
  
    patient.save(function(err, post){
      if(err){ return next(err); }
  
      res.json(patient);
    });
  });
  
  router.delete('/patients/:patient', function(req, res, next) {
      req.patient.remove(function(err, patient){
        if (err) { return next(err); }
        res.json(patient);
      });
  });
  
  router.param('patient', function(req, res, next, id) {
    var query = Patient.findById(id);
  
    query.exec(function (err, patient){
      if (err) { return next(err); }
      if (!post) { return next(new Error('can\'t find patient')); }
  
      req.patient = patient;
      return next();
    });
  });
  
  router.get('/details/:patient', function(req, res) {
    res.json(req.patient);
  });
  
  module.exports = router;
  </code></pre>
  
  <p>I suspect the answer is quite straightforward, given the other code, but maybe not? 
  Thanks. </p>