title: Binding service data in angularJS
body: <p>I have a service that is used to share data between 2 controllers and retrieves a data list:</p>
  
  <pre><code>myApp.service('DataService', function($http) {
      this.data = [];
      this.loadData = function() {
          $http.get('/api/data').success(function(data) {
              this.data= data;
          })
      };
  
  });
  </code></pre>
  
  <p>which is called in my controller:</p>
  
  <pre><code>myApp.controller('appController', function($scope, DataService) {
      $scope.DataService= DataService;
      DataService.loadData();
  });
  </code></pre>
  
  <p>and displayed here:</p>
  
  <pre><code>&lt;div ng-controller="appController"&gt;
      &lt;li ng-repeat='item in DataService.data'&gt;
          &lt;a href="#item/{{item.ID}}"&gt; View Item&lt;/a&gt;
      &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When this is ran, it doesn't display anything.
  I have ran it with some alert boxes and can see that the data list is populated with the data I want to display but no information is displayed otherwise.</p>