title: Short way to replace content of an array
body: <p>Is there any convenient way to replace the content of an array, AND keep a reference to it? I don't want to replace the array like this:</p>
  
  <pre><code>var arr1 = [1,2,3];
  var referenceToArr1 = arr1;
  var arr2 = [4,5,6];
  
  arr1 = arr2;
  // logs: [4,5,6] false
  console.log(arr1, arr1===referenceToArr1);
  // logs [1,2,3]
  console.log(referenceToArr1);
  </code></pre>
  
  <p>This way <code>arr1</code> has the content of <code>arr2</code>, but I loose the reference in <code>referenceToArr1</code>, because it still points to the <em>original</em> <code>arr1</code>.</p>
  
  <p>With this way, I don't loose the reference:</p>
  
  <pre><code>var arr1 = [1,2,3];
  var referenceToArr1 = arr1;
  var arr2 = [4,5,6];
  
  arr1.length = 0;
  for (var i = 0; i &lt; arr2.length; i++) {
    arr1.push(arr2[i]);
  }
  // logs: [4,5,6] true
  console.log(arr1, arr1===referenceToArr1);
  // logs: [4,5,6]
  console.log(referenceToArr1)
  </code></pre>
  
  <p>The drawback here is, that I have to empty <code>arr1.length = 0</code>, iterate over every element of <code>arr2</code> and push it to <code>arr1</code> by hand.</p>
  
  <p>My questions are:</p>
  
  <ul>
  <li>Sure, I could write a helper for this, but what is the most efficient way?</li>
  <li>Is there a short, vanilla javascript way, to do this (maybe a one liner?)</li>
  <li>I'm also using underscore.js but haven't found a method for this kind of problem. Is there a way to do this with underscore.js?</li>
  </ul>
  
  <p><strong>Background:</strong></p>
  
  <p>I have an AngularJS app with a service. Inside this service, I have an array to keep all the elements loaded from the server. The data from the service get's bind to a controller and is used in a view. When the data from the service get's change (e.g. a refetch happens), I want to auto update my controllers vars and the view it is bind to.</p>
  
  <p><strong>Here is a Plunker: <a href="http://plnkr.co/edit/8yYahwDO6pAuwl6lcpAS?p=preview" rel="noreferrer">http://plnkr.co/edit/8yYahwDO6pAuwl6lcpAS?p=preview</a></strong></p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.controller('MainCtrl', function($scope, myService) {
    $scope.name = 'World';
    myService.fetchData().then(function(data) {
      console.log(data)
      $scope.data = data;
    })
  });
  
  app.service('myService', function($timeout, $q) {
    var arr;
    var deferred;
  
    var loadData = function() {
      // here comes some data from the server
      var serverData = [1,2,3];
      arr = serverData;
      deferred.resolve(arr);
  
      // simulate a refetch of the data
      $timeout(function() {
        var newServerData = [4,5,6];
        // this won't work, because MainCtrl looses it's reference
        // arr = newServerData;
      }, 1000);
  
      $timeout(function() {
        var newServerData = [7,8,9];
        arr.length = 0;
        [].push.apply(arr, newServerData);
      }, 2000);
  
      $timeout(function() {
        var newServerData = [10,11,12];
        [].splice.apply(arr, [0, arr.length].concat(newServerData));
      }, 3000);
    }
  
    return {
      fetchData: function() {
        deferred = $q.defer();
  
        loadData();
  
        return deferred.promise;
      }
    }
  })
  </code></pre>
  
  <p>And the view:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
      &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.16/angular.js" data-semver="1.2.16"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="d in data"&gt;{{d}}&lt;/li&gt;
      &lt;/ul&gt;
      3 refetches every second
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>