title: Clear a public variable in Angular Service
body: <p>I am fairly new to Angular and ran into an issue, google and stack overflow didn't turn up anything useful, I believe largely due to the fact I don't even know what to search for. So here's my problem hoping you could help me resolve. I have the following code:
  <a href="https://jsfiddle.net/fz2zgozx/" rel="nofollow">JSFiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button ng-click="reload()"&gt;Reload&lt;/button&gt;
  &lt;button ng-click="loadMore()"&gt;Load More&lt;/button&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="item in list"&gt;{{ item }}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('mainCtrl', ['$scope', 'mainSvr', function ($scope, mainSvr) {
      $scope.list = mainSvr.list;
      $scope.reload = mainSvr.reload;
      $scope.loadMore = mainSvr.loadMore;
  }]);
  
  app.service('mainSvr', function () {
      // private
      var self = this;
  
      // public
      this.list = [];
  
      this.reload = function () {
          for (var i = 0; i &lt; 5; i++) {
              self.list.push(i * 10);
          }
      };
  
      this.loadMore = function () {
          var listLength = self.list.length;
          for (var i = listLength; i &lt; listLength + 5; i++) {
              self.list.push(i * 10);
          }
      }
  });
  </code></pre>
  
  <p>When I click on reload I want to clear and re-populate the list (so it shows 0-40 again), how do I do it?
  I tried:</p>
  
  <pre><code>this.reload = function () {
      self.list = [];
      for (var i = 0; i &lt; 5; i++) {
          self.list.push(i * 10);
      }
  };
  </code></pre>
  
  <p>But it didn't work, nothing show up at all. I use debugger and break point and saw that the list is actually cleared and re-populated, somehow the UI doesn't pick it up when I do self.list = []; Please help me understand what I did wrong.</p>