Ember and Handlebars Iterate Over a Set Array

I'm working on learning Ember and am trying to do some small ideas with it. Currently, I am trying to receive text field input to filter a list and return the matching results. I have all of this working, you know, the 'hard' stuff. However, the part that isn't working is Handlebars reading the 'title' property of my array that I am returning. It's just blank.

Here is my template:

<script data-template-name="application" type="text/x-handlebars">
  {{input type="text" value=searchString placeholder="Search..."}}
  {{filterMovies}}
  <ul>
    {{#each searchResults}}
    <li>{{title}}</li>
    {{/each}}
  </ul>
</script>

And now my controller:

    App.ApplicationController = Ember.Controller.extend({
    filterMovies: function() {
      var self = this,
        searchString = self.get('searchString'),
        searchResults = [],
        filterArrLength = null,
        theFullMovieList,
        theFilteredMovieList = [];

      if (!searchString) {
        return;
      }

      var url = 'http://ift.tt/1m4Dy8d';
      Ember.$.getJSON(url).then(function(data) {
        theFullMovieList = data;

        theFullMovieList.filter(function(movie) {
          if (movie.title.toLowerCase().startsWith(searchString)) {
            theFilteredMovieList.push(movie);
          }
        });
        console.log(theFilteredMovieList);
        self.set('searchResults', theFilteredMovieList);
      });
    }.property('searchString')
  });

I have tried printing using {{this}}, {{this.title}}, {{searchResults.title}}, and {{title}} with no luck. However, logging the array shows the correct values.

Any ideas? View On CodePen