title: Displaying data from MongoDB (MEAN Stack)
body: <p>I am trying to displaying some data from a Mongo DB onto the front-end. I am working with the MEAN stack, which I'm relatively new at. </p>
  
  <p>I have successfully gotten the data to display in JSON format at a localhost URL (localhost:3030/incidents), but cannot get the clean data to appear on the front end (which is at localhost:9000).</p>
  
  <p>This is what my code looks like so far for the server side (<em>router.js</em>):</p>
  
  <pre><code>"use strict";
  
  var config = require('../config/database-config');
  
  var Router = function (options) {
    var self = this;
    self.environment = options.environment;
  
  
    self.route = function(app) {
      var IncidentController = require('./controllers/incident-controller.js');
      var IncidentModel = require('./models/incident-model.js');
      var incidentModel = new IncidentModel(config[`${self.environment}`]);
      console.log("Incident Model", incidentModel);
      var incidentController = new IncidentController({model: incidentModel});
  
      app.get('/api/incident/:id', incidentController.findIncidentById);
      app.get('/incidents', incidentController.getAllIncidents);
    };
    return self;
  };
  
  module.exports = Router;
  </code></pre>
  
  <p><strong>Client side:</strong></p>
  
  <p><em>services.js:</em></p>
  
  <pre><code>'use strict';
      angular.module('victimList.services', []).factory('Victim', function($resource) {
        return $resource('http://localhost:3030/api/incident/:id');
      }); 
  </code></pre>
  
  <p><em>data.js:</em></p>
  
  <pre><code>'use strict';
  
   angular.module('victimList', [])
     .service('victimList')
     .controller('DataCtrl', ['victimService', function ($scope, victimService) {
        victimService.getVictims(function(victims) {
          $scope.victims = victims;
        });
  }])
    .factory('victimSerivce', function($http) {
      var getVictims = function(callback) {
        $http.get('http://localhost:3030/incidents').success(function(data){
          callback(data);
        });
      };
  
      return {
        getVictims: getVictims
      };
    });
  </code></pre>
  
  <p><em>app.js:</em></p>
  
  <pre><code>'use strict';
  
  angular
    .module('frontendApp', [
      'ngAnimate',
      'ngCookies',
      'ngResource',
      'ngRoute',
      'ngSanitize',
      'ngTouch',
      'victimList',
    ])
    .config(function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl',
          controllerAs: 'main'
        })
        .when('/victims', {
          templateUrl: 'views/victims.html',
          controller: 'DataCtrl',
          controllerAs: 'victims'
        })
        .otherwise({
          redirectTo: '/'
        });
    });
  </code></pre>
  
  <p><em>victims.html:</em></p>
  
  <pre><code>&lt;div ng-app="victimList"&gt;
    &lt;h1&gt;Testing&lt;/h1&gt;
      &lt;div ng-controller="DataCtrl"&gt;
          &lt;ul ng-repeat="victim in victims"&gt;
              &lt;li&gt;1&lt;/li&gt;
              &lt;li&gt;{{ victim.firstname }} {{ victim.lastname }}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When I navigate to the localhost:9000/victims page, I get the header tag, but no data. The console shows this error:</p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: victimServiceProvider &lt;- victimService &lt;- DataCtrl
  </code></pre>
  
  <p>What could I be missing? Thanks in advance for your help!</p>