title: Angular.js .push creates a new ng-repeat instead of appending new data to main div
body: <p>I'm trying to create a "load more" functionality using Angular, but when I click "load more", a new ng-repeat div is being created rather than appending data to existing div. I couldn't understand why it's happening. I tried both loadMore.data and loadMore.data[0]. While <code>loadMore.data[0]</code> works, it creates a new ng-repeat. <code>loadMore.data</code> doesn't work at all, it creates an empty div.</p>
  
  <p>ui-router stuff</p>
  
  <pre><code>angular.module('site.feed.routes')
  .run(
    ['$rootScope', '$state', '$stateParams',
      function($rootScope, $state, $stateParams) {
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
      }
    ]
  )
  
  .config(
    ['$stateProvider', '$urlRouterProvider', '$locationProvider',
      function($stateProvider, $urlRouterProvider, $locationProvider) {
  
        $locationProvider.html5Mode({
          enabled: true,
          requireBase: false
        });
  
        $stateProvider
          .state('posttest', {
            url: '/post1',
            templateUrl: 'view.html',
            resolve: {
              data: 'PostData',
            },
            controller: 'PostController'
          });
      }
    ]
  );
  </code></pre>
  
  <p>Factory</p>
  
  <pre><code>angular.module('site.feed').factory('PostData', ["$http", function($http) {
    return {
      getPage: function(pageNumber) {
        return $http.get('/feed/' + pageNumber);
      }
    };      
  }]);
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>angular.module('site.feed').controller('PostController', ['$scope', 'data', 'PostData', function($scope, data, PostData) {
    $scope.page = 0;
    $scope.data = data; // first page
  
    if ($scope.page === 0) {
      PostData.getPage(1).then(function(returned) {
        $scope.data = returned.data;
        $scope.page++;
      });
    }
  
    $scope.incr = function() {
      $scope.page++;
      PostData.getPage($scope.page).then(function(loadMore) {
        //console.log($scope.data);
        $scope.data.push(loadMore.data[0]);
      });
    };
  }]);
  </code></pre>
  
  <p>View</p>
  
  <pre><code>&lt;div ng-repeat="feedflow in data"&gt;
    &lt;div ng-repeat="ehe in feedflow.feed"&gt;
      {{feedflow.id}}
      {{ehe.status}}
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button ng-click="incr()"&gt;load next page&lt;/button&gt;
  </code></pre>