JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="arrayTest" ng-controller="ArrayController">
        <input type="button" value="Populate Array Retaining Reference (binding works)" ng-click="retainReference()"/>
        <input type="button" value="Populate Array Breaking Reference (breaks binding)" ng-click="breakReference()"/>
        <ul>
            <li ng-repeat="item in data">{{item.RandomNumber}}</li>
        </ul>
    </div>

JavaScript

var module = angular.module('arrayTest', []);

module.service('myService', function ($timeout) {
        var data = [];
        return {
            data: function(){
                return data;
            },
            populateDataRetainingReference: function () {
                $timeout(function(){
                    data.length = 0;
                    for(var i = 0; i < 15; i++){
                        data.push({RandomNumber: Math.random()});                        
                    }
                }, 100);
            },
            populateDataBreakingReference: function(){
                $timeout(function(){
                    var newArray = [];
                    for(var i = 0; i < 15; i++){
                        newArray.push({RandomNumber: Math.random()});                        
                    }

                    data = newArray;
                }, 100);
            }
        }
    });

function ArrayController($scope, myService){
    $scope.data = myService.data();

    $scope.retainReference = function(){
        myService.populateDataRetainingReference();
    }

    $scope.breakReference = function(){
        myService.populateDataBreakingReference();
    }
}