title: AngularJS factory dependencies
body: <p>I'm using AngularJS to extract information stored in mongodb. I'm trying to use a factory to retrieve that information using <code>$http</code> . I read so much information about how to do it, and no one works for me. </p>
  
  <p>Also I'm using node + express, the routes works fine. The problem is the factory and the dependencies. </p>
  
  <p>The only thing I need is: </p>
  
  <ol>
  <li>Extract information stored in mongodb. </li>
  <li>Store that information in a controller.</li>
  <li>Show that information in the main page of my app. </li>
  </ol>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="angular-blog"&gt;
    &lt;head&gt;
      &lt;title&gt; Angular blog &lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- AngularJS and JQuery include.  --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;!-- Custom CSS --&gt;
      &lt;link rel="stylesheet" href="./css/article.css" &gt;&lt;/link&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;&lt;/link&gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"&gt;&lt;/link&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
  
      &lt;menu-bar&gt;&lt;/menu-bar&gt;
  
      &lt;div class="container" ng-controller="ArticleController as articleCtrl"&gt;
        &lt;h2&gt; Blog &lt;/h2&gt;
        &lt;div class="col-sm-4" ng-repeat="elem in articleCtrl.list"&gt;
          &lt;h4&gt;{{ elem.title }}&lt;/h4&gt;
          &lt;p&gt; {{ elem.desc }} &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;!-- Custom controller. --&gt;
      &lt;script src="./js/controllers/article.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>article.js</strong></p>
  
  <pre><code>(function (){
    var app = angular.module ('angular-blog', []);
  
    app.directive ('menuBar', function (){
      return {
        restrict        : 'E',
        templateUrl     : '../templates/menu-bar.html'
      };
    });
  
    app.service ('articleFactory', ['$q', '$http', function ($q, $http){
      this.getAllArticles = function (){
        var deferred        = $q.defer(),
            httpPromise     = $http.get ('/entries');
  
        httpPromise.success (function (data){
          deferred.resolve (data);
        })
        .error (function (err){
          console.log (err);
        });
  
        return deferred.promise;
      }
    }]);
  
    app.controller ('ArticleController', ['$http', 'articleFactory', function ($http, articleFactory){
      this.article = {}; // Simple article.
      this.list = []; // Article list.
  
      this.list = articleFactory.getAllArticles()
      .then (function (data){
        return data;
      }, function (err){
        console.error (err);
      });
  
      this.addArticle = function (){
        $http.post ('/addEntry', this.article)
        .success (function (data){
          console.log (data);
        })
        .error (function (data){
          console.log ('Error: ' + data);
        });
  
        this.article = {};
      };
  
      this.resetArticle = function (){
        this.article = {};
      };
  
    }]);
  
  })();
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <p>My main page doesn't show the list. </p>