title: Angular Controller Loading Before Data Is Loaded
body: <p>I am writing a simple app that loads movie info from an API. After this loading, I am attempting to use Angular to display the movies in a simple list view. I am correctly loading the movies, but it seems like the angular controller is created and sends the movie array to the view before the movie array is populated. I am unsure how to get around this.</p>
  
  <pre><code>var movieList = [];
  var app = angular.module('top250', []);
  
  // immediately make a call to the server to get data (array of movies from text file)
  $.post('/', {}, function(data) {
      init(data);
  });
  
  app.controller('MovieController', function() {
      // should be setting this.movies to an array of 250 movies
      this.movies = movieList;
  });
  
  function init(data) {
      // cycle through array, use title to retrieve movie object, add to array to be sent to view
  
      $.each(data, function(index, value) {
          var title = value.split(' (')[0];
          title = title.split(' ').join('+');
          var url = 'http://www.omdbapi.com/?t=' + title + '&amp;y=&amp;plot=short&amp;r=json';
  
          $.getJSON(url, function(data) {
              console.log('in get json', data);
              var movieObj = data;
              storeMovie(movieObj);
          });
  
      });
  }
  
  function storeMovie(movieObj) {
      movieList.push(movieObj);
  }
  </code></pre>
  
  <p>And my HTML (although I'm certain this isn't the problem:</p>
  
  <pre><code>&lt;body ng-controller="MovieController as MovieDB"&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="large-12 columns"&gt;
        &lt;h1&gt;IMDB Top 250 List&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="large-12 columns" id="movie-list"&gt;
  
      &lt;div class="list-group-item" ng-repeat="movie in MovieDB.movies"&gt;
        &lt;h3&gt;{{movie.Title}} &lt;em class="pull-right"&gt;{{movie.Plot}}&lt;/em&gt;&lt;/h3&gt;
  
  
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).foundation();
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>