title: AngularJS controller not displaying data from array
body: <p>I'm currently working on some code in Angular which loads a list of blogposts to a website. I have a module and controller, and have an ng-repeat loop set up to iterate through a json which acts as an index for a bunch of html files. However, the tags which should be outputting data from my index object are all empty on the final page.</p>
  
  <p>app.js:</p>
  
  <pre><code>var PersonalApp = angular.module('PersonalApp', [
    'ngRoute',
    'MasterCtrl'
  ]);
  
  PersonalApp.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/blog', {
          templateUrl: 'partials/blog.html',
          MasterCtrl: 'MasterCtrl'
  
        }).
        when('/about', {
          templateUrl: 'partials/about.html',
          MasterCtrl: 'MasterCtrl'
  
        }).
        when('/projects', {
          templateUrl: 'partials/about.html',
          MasterCtrl: 'MasterCtrl'
  
        }).
        when('/contact', {
          templateUrl: 'partials/about.html',
          MasterCtrl: 'MasterCtrl'
  
        }).
        otherwise({
          redirectTo: '/blog'
        });
    }]);
  </code></pre>
  
  <p>MasterCtrl.js:</p>
  
  <pre><code>var MasterCtrl = angular.module('MasterCtrl', []);
  
  MasterCtrl.controller('MasterCtrl', ['$scope', '$http',
      function ($scope) {
          $.ajax({
              url: '../BlogPosts/posts.json',
              dataType: 'json',
              success: function (bposts) {
                  $scope.bposts = (bposts);
                  bposts = JSON.stringify(bposts)
                  console.log(bposts);
              }
          });
      }]);
  </code></pre>
  
  <p>blog.html:</p>
  
  <pre><code>&lt;article ng-repeat="posts in bposts" class="post-173 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized masonry-brick" style="position: absolute; left: 0px; top: 0px;"&gt;
                  &lt;div class="item-sizer"&gt;
  
                      &lt;header class="entry-header blog-entry-header"&gt;
  
                          &lt;div class="entry-data"&gt;
                              &lt;span class="posted-on"&gt;
                                  &lt;a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark"&gt;
                                      &lt;time class="entry-date published updated" datetime="2015-08-20T02:48:02+00:00"&gt;{{posts.ID}}&lt;/time&gt;
                                  &lt;/a&gt;
                              &lt;/span&gt;
  
                          &lt;/div&gt;
                          &lt;h1 class="entry-title"&gt;&lt;a ng-href="/../BlogPosts/{{posts.ID}}" rel="bookmark"&gt;{{posts.Title}}&lt;/a&gt;&lt;/h1&gt; &lt;/header&gt;&lt;!-- .entry-header --&gt;
                          {[posts.ID}}
  
                      &lt;div class="entry-content"&gt;
                          &lt;p&gt;{{posts.Summary}}&lt;a class="read-more" ng-href="/../BlogPosts/{{posts.ID}}"&gt;Continue reading&lt;/a&gt;&lt;/p&gt;
                      &lt;/div&gt;&lt;!-- .entry-content --&gt;
                  &lt;/div&gt;
              &lt;/article&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is the console output of my originally jQuery:</p>
  
  <pre><code>{"posts":[{
      "ID":"441770384",
      "Title":"TestPost",
      "Summary":"Doot Doot",
      "Thumb":"null"
  },{
      "ID":"1441835958",
      "Title":null,
      "Summary":"null",
      "Thumb":"‌​null"
  },{
      "ID":"1441836000",
      "Title":null,
      "Summary":"null",
      "Thumb":"null"
  },{
      "ID":"14‌​41836039",
      "Title":"dfasdf",
      "Summary":"null",
      "Thumb":"null"
  }]}
  </code></pre>