title: Thinkster.io MEAN Stack problems
body: <p>I am working on the Thinkster.io MEAN Stack tutorial. Here is the link: <a href="https://thinkster.io/mean-stack-tutorial" rel="nofollow">https://thinkster.io/mean-stack-tutorial</a></p>
  
  <p>I have just finished the coding for the front-end (AngularJS), and am about to move on to the Node section. For some reason, I am not getting the results that I should get. When I open the page, in Console.log I get the following error:</p>
  
  <pre><code>Error: [$rootScope:infdig] http://errors.angularjs.org/1.3.10/$rootScope/infdig?p0=10&amp;p1=%5B%5D
  </code></pre>
  
  <p>Here is my code:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Flapper News&lt;/title&gt;
    &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;style&gt; .glyphicon-thumbs-up { cursor:pointer } &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;script type="text/ng-template" id="/home.html"&gt;
    &lt;div class="page-header"&gt;
      &lt;h1&gt;Flapper News&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;!-- rest of template --&gt;
    &lt;span&gt;
      &lt;a href="#/posts/{{$index}}"&gt;Comments&lt;/a&gt;
    &lt;/span&gt;
  &lt;/script&gt;
  
  &lt;script type="text/ng-template" id="/posts.html"&gt;
  
    &lt;!-- post template --&gt;
  
    &lt;form ng-submit="addComment()"
      style="margin-top:30px;"&gt;
      &lt;h3&gt;Add a new comment&lt;/h3&gt;
  
      &lt;div class="form-group"&gt;
        &lt;input type="text"
        class="form-control"
        placeholder="Comment"
        ng-model="body"&gt;&lt;/input&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-primary"&gt;Post&lt;/button&gt;
    &lt;/form&gt;
  &lt;/script&gt;
  
  &lt;body ng-app="flapperNews"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
            &lt;ui-view&gt;&lt;/ui-view&gt;
        &lt;div class="page-header"&gt;
          &lt;h1&gt;Flapper News&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;div ng-repeat="post in posts | orderBy:'-upvotes'"&gt;
          &lt;span class="glyphicon glyphicon-thumbs-up"
            ng-click="incrementUpvotes(post)"&gt;&lt;/span&gt;
          {{post.upvotes}}
          &lt;span style="font-size:20px; margin-left:10px;"&gt;
            &lt;a ng-show="post.link" href="{{post.link}}"&gt;
              {{post.title}}
            &lt;/a&gt;
            &lt;span ng-hide="post.link"&gt;
              {{post.title}}
            &lt;/span&gt;
          &lt;/span&gt;
        &lt;/div&gt;
  
        &lt;form ng-submit="addPost()"
          style="margin-top:30px;"&gt;
          &lt;h3&gt;Add a new post&lt;/h3&gt;
  
          &lt;div class="form-group"&gt;
            &lt;input type="text"
              class="form-control"
              placeholder="Title"
              ng-model="title"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text"
            class="form-control"
            placeholder="Link"
            ng-model="link"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Post&lt;/button&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>var app = angular.module('flapperNews', ['ui.router'])
  
  app.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl'
      })
      .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'PostsCtrl'
      });
  
    $urlRouterProvider.otherwise('home');
  }]);
  
  app.factory('posts', [function(){
    var o = {
      posts: []
    };
    return o;
  }])
  
  app.controller('MainCtrl', ['$scope','posts',function($scope, posts){
    $scope.test = 'Hello world!';
    $scope.posts = posts.posts;
  
    $scope.addPost = function(){
      if(!$scope.title || $scope.title === '') { return; }
      $scope.posts.push({
        title: $scope.title,
        link: $scope.link,
        upvotes: 0,
        comments: [
          {author: 'Joe', body: 'Cool post!', upvotes: 0},
          {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
        ]
      });
      $scope.title = '';
      $scope.link = '';
    };
  
    $scope.incrementUpvotes = function(post) {
      post.upvotes += 1;
    };
  }]);
  
  app.controller('PostsCtrl', ['$scope','$stateParams','posts',function($scope, $stateParams, posts){
      $scope.post = posts.posts[$stateParams.id];
  
      $scope.addComment = function(){
        if($scope.body === '') { return; }
        $scope.post.comments.push({
          body: $scope.body,
          author: 'user',
          upvotes: 0
        });
        $scope.body = '';
      };
  }]);
  </code></pre>
  
  <p>Any help would very much be appreciated!</p>