<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyController" class="container">
    <div class="well">
      <h1>Fruit machine</h1>
      
      <a href="http://stackoverflow.com/questions/22374034/rows-data-should-be-existing-while-adding-empty-rows-to-table-using-angularjs/22375103#22375103" target="_blank">
        Stackoverflow question
      </a>
    </div>
    
    <h2>Fruits</h2>
    
    <ul>
      <li ng-repeat="fruit in fruits track by $index">{{ fruit }}</li>
    </ul>
    
    <div class="form-group">
      <label>New fruit</label>
      <input class="form-control" ng-model="newFruit">
    </div>
    
    <button ng-click="addFruit()" class="btn btn-default">Add</button>
    <button ng-click="addMultiple()" class="btn btn-default">Add Multiple</button>
    <button ng-click="addEmptyRows()" class="btn btn-default">Add Empty Rows</button>
  </body>

</html>

// Code goes here

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

myApp.controller('MyController', function($scope) {
  
  $scope.newFruit = 'android';
  $scope.fruits = ['apple','mango','banana'];
  
  $scope.addFruit = function() {
		$scope.fruits.push($scope.newFruit);
	};
	
	$scope.addMultiple = function() {
    for(var i = 0; i < 10; i++) {
      $scope.fruits.push($scope.newFruit);
    }
	};
	
	$scope.addEmptyRows = function() {
    for(var i = 0; i < 10; i++) {
      $scope.fruits.push(null);
    }
	};
});
/* Styles go here */