title: AngularJS - Using a Service as a Model, ng-repeat not updating
body: <p>I'm creating an ajax search page which will consist of a search input box, series of filter drop-downs and then a UL where the results are displayed.</p>
  
  <p>As the filters part of the search will be in a separate place on the page, I thought it would be a good idea to create a Service which deals with coordinating the inputs and the ajax requests to a search server-side. This can then be called by a couple of separate Controllers (one for searchbox and results, and one for filters).</p>
  
  <p>The main thing I'm struggling with is getting results to refresh when the ajax is called. If I put the ajax directly in the SearchCtrl Controller, it works fine, but when I move the ajax out to a Service it stops updating the results when the find method on the Service is called.</p>
  
  <p>I'm sure it's something simple I've missed, but I can't seem to see it.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div ng-app="jobs"&gt;
      &lt;div data-ng-controller="SearchCtrl"&gt;
          &lt;div class="search"&gt;
              &lt;h2&gt;Search&lt;/h2&gt;
              &lt;div class="box"&gt;&lt;input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder="Type to start your search..." /&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="search-summary"&gt;
              &lt;p&gt;&lt;span class="field"&gt;You searched for:&lt;/span&gt; {{ search_term }}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="results"&gt;
              &lt;ul&gt;
                  &lt;li data-ng-repeat="item in searchService.results"&gt;
                      &lt;h3&gt;{{ item.title }}&lt;/h3&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>AngularJS:</p>
  
  <pre><code>var app = angular.module('jobs', []);
  
  app.factory('searchService', function($http) {
      var results = [];
  
      function find(term) {
          $http.get('/json/search').success(function(data) {
              results = data.results;
          });
      }
  
      //public API
      return {
              results: results,
              find: find
      };
  });
  
  app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function($scope, $http, searchService) {
      $scope.search_term = '';
      $scope.searchService = searchService;
  
      $scope.doSearch = function(){
          $scope.searchService.find($scope.search_term);
      };
  
      $scope.searchService.find();
  }]);
  </code></pre>
  
  <p>Here is a rough JSFiddle, I've commented out the ajax and I'm just updating the results variable manually as an example. For brevity I've not included the filter drop-downs.</p>
  
  <p><a href="http://jsfiddle.net/XTQSu/1/" rel="noreferrer">http://jsfiddle.net/XTQSu/1/</a>  </p>
  
  <p>I'm very new to AngularJS, so if I'm going about it in totally the wrong way, please tell me so :)</p>