title: Getting Information From Mongo And Displaying It With AngularJS
body: <p>Hello I am trying to learn the mean stack and seem to be stuck.</p>
  
  <p>I created a node.js, express angular and mongo project.</p>
  
  <p>I have installed mongo with <code>npm install mongodb</code></p>
  
  <p>How do I pass data from mongo to the angular view?</p>
  
  <p>my index.ejs file looks like this</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="phonecatApp"&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
      &lt;link rel='stylesheet' href='/stylesheets/style.css' /&gt;
        &lt;script src="/javascripts/countriesCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="/javascripts/angular.min.js" &gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;&lt;%= title %&gt;&lt;/h1&gt;
      &lt;p&gt;Welcome to &lt;%= title %&gt;&lt;/p&gt;
  
          &lt;div ng-controller="PhoneListCtrl"&gt;
              &lt;table border="1" cellspacing="0"  cellpadding=3&gt;
                  &lt;tr&gt;&lt;td&gt;Abbreviation&lt;/td&gt;&lt;td&gt;Name&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr ng-repeat="state in states"&gt;
                      &lt;td&gt;{{state.abbreviation}}&lt;/td&gt;&lt;td&gt;{{state.name}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my countriesCtrl.js looks like this</p>
  
  <pre><code>var MongoClient = require('mongodb').MongoClient;
  //var mongoClient = new MongoClient(new Server('localhost', 27017));
  var phonecatApp = angular.module('phonecatApp', []);
  
  phonecatApp.controller('PhoneListCtrl', function ($scope) {
  
          $scope.lkp_states = function() {
  
              MongoClient.connect("mongodb://localhost:27017/website", function(err, db) {
                  if(err) {
                      return console.dir(err);
                  }
                  else
                  {
                      console.log("connected to mongo");
                  }
              })
  
              return db.collection('states');
          }
      });
  </code></pre>
  
  <p>The error I get is this</p>
  
  <pre><code>GET http://localhost:3000/ [HTTP/1.1 200 OK 35ms]
  Use of getUserData() or setUserData() is deprecated.  Use WeakMap or element.dataset instead. requestNotifier.js:63
  GET http://localhost:3000/stylesheets/style.css [HTTP/1.1 304 Not Modified 17ms]
  GET http://localhost:3000/javascripts/countriesCtrl.js [HTTP/1.1 304 Not Modified 15ms]
  GET http://localhost:3000/javascripts/angular.min.js [HTTP/1.1 304 Not Modified 7ms]
  ReferenceError: require is not defined countriesCtrl.js:2
  http://localhost:3000/javascripts/angular.min.js is being assigned a //# sourceMappingURL, but already has one
  Error: [$injector:modulerr] http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=phonecatApp&amp;p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.21%2F%24injector%2Fnomod%3Fp0%3DphonecatApp%0Ay%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A6%3A443%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A20%3A385%0AZc%2Fb.module%3C%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A20%3A273%0Ae%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A33%3A206%0Aq%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A7%3A288%0Ae%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A33%3A148%0Agc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A36%3A250%0Afc%2Fc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A18%3A58%0Afc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A18%3A270%0AXc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A17%3A369%0A%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A213%3A58%0Aa%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A144%3A399%0Aoe%2Fc%2F%3C%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A31%3A159%0Aq%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40http%3A%2F%2Flocalhost%3A3000%2Fjavascripts%2Fangular.min.js%3A31%3A143%0A angular.min.js:6
  GET http://localhost:3000/stylesheets/style.css
  </code></pre>