ng-repeat is not updating when array is changed


I have an ng-repeat that isn't updating upon changing the data in the array that it is using. I've researched for quite a while but nothing seems to be working. Initially, when the page loads, the ng-repeat displays the first page of a dataset, upon getting new data (the next page) and setting that array with this data, the ng-repeat isn't noticing the change and never populates with the updated array. It would be greatly appreciated if someone could steer me in the right direction on this.

gatekeeper.controller('businessController', ['$scope', 'siteService', function($scope, siteService) {

$ = 1;
$scope.resultsPerPage = 50;
$scope.maxPaginationSite = 10;
$scope.pageCount = 0;
$scope.resultCount = 0;
$scope.getBusinessSites = [];

function getBusinessSites()
    siteService.getBusinessSites($, $scope.resultsPerPage).then(function(response) {
        $scope.getBusinessSites =;
        $scope.resultCount =[0].QueryCount;
        $ =[0].Page;
        $scope.pageCount = Math.ceil($scope.resultCount / 50);
$scope.pageChanged = function () {
    $ =;
    getBusinessSites($, $scope.resultsPerPage);



<tbody ng-controller="businessController">

        <tr ng-repeat="site in getBusinessSites">
            <td>{{ site.SiteName }}</td>

            <td class="tableButton">

                <button ng-controller="ModalCtrl" type="button" class="btn btn-default" ng-click="open('lg')">
                    {{ site.ClientName }}

                <br />

                No Data Yet


            <td>{{ site.Subdomain }}</td>

                <a href={{ site.URL}}> {{ site.URL}} </a>

                <br />

                <b>Go-live Date: </b> No Data Yet


            <td>No Data Yet</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
            <td>No Data Yet</td>
        <div >
            <uib-pagination class="pull-right" boundary-link-numbers="true" max-size="maxPaginationSite" boundary-links="true" total-items="resultCount" ng-model="page" ng-change="pageChanged()"></uib-pagination>
Problem courtesy of: J_S5280


Try wrapping the tbody inside of a div and but the controller in the div:

<div ng-controller="BusinessController">
        <tr ng-repeat="site in getBusinessSites">

and I suggest naming the $scope.getBusinessSites to $scope.businessSites for avoiding confusion :)

Solution courtesy of: Konkko


The problem is that ng-repeat has referenced on this initial empty array [], when you change $scope.getBusinessSites, you change this variable's reference, but ng-repeat still reference on that empty array in memory.

So, solution is write data directly to array your ng-repeat reference. You can do it with angular.extend function:

Change this line:

$scope.getBusinessSites =;

On this one:


UPD: Also, if you use loading data not once, you'll need to clear previously loaded data in that array:

// empties an array
$scope.getBusinessSites.length = 0;
Discussion courtesy of: doroshko

The ng-repeat create its own scope. Try adding $parent to reference your variable on your current controller scope

Discussion courtesy of: LTroya

This recipe can be found in it's original form on Stack Over Flow.