title: Angular view not updating when refreshing data coming from service with $http
body: <p>This might be a question asked 10 thousand times but I still can't find a proper solution to this problem.</p>
  
  <p>I just have the classical example of controller getting the data from a service, which in turn uses <code>$http</code> to fetch some data asynchronously from an API (or JSON file). Because the data in the controller are a reference to an object in the service, I was expecting the data to change when the service has done its job, and so I was expecting the view to update. As you can see in the snippet below the view retains the initial value.</p>
  
  <p>Thus, my two questions:</p>
  
  <ol>
  <li>Is this a good pattern? Imagine that the controllers are more than one and that at certain point the data needs to be re-fetch (and so updated in any controller)</li>
  <li>Why the view is not updating ?</li>
  </ol>
  
  <p>Keep in mind that I don't want to use $scope (if possible) nor $rootSscope, nor $watch.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', [])
  .service('Service', ['$http', service])
  .controller('Controller', ['Service', controller]);
  
  
  function controller(Service){
      var c = this;
      c.items = [
        {'title': 'Default title1'},
        {'title': 'Default title2'}
      ];
      c.items = Service.data;
  }
  
  function service($http, $scope){
      var data = [
        {'title': 'olddatatitle'}
      ];
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts?userId=1',
        cache: true
      }).then(function(response){
        data = response.data;
      });
      return {
        data: data
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="myApp" &gt;
    &lt;ul ng-controller="Controller as c"&gt;
      &lt;li ng-repeat="item in c.items"&gt;
        {{item.title}}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>