Binding to an AngularJS Controller

HTML

<div ng-app>
		<div class="hidden-print" ng-controller="PrintCtrl">
            <br />
            <div id="overallPrint" class='visible-print' style="float:left; margin-right:50px;">
                <h4>Overall Report</h4>
                
                <table border="1">
                    <thead>
                        <tr>
                            <td>Name</td>
                            <td>Price</td>
                            <td>Quantity</td> 
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items">
                            <td>{{item.Name}}</td>
                            <td>{{item.Price}}</td>
                            <td>{{item.Quantity}}</td>						 
                        </tr>
                    </tbody>
                </table>
                
                <br>
                <input type="button" value="Print Overall" ng-click='printOverallReport()' />
            </div>
          
                  
            
		</div>
	</div>

CSS

table
{
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

.boldText { font-weight:bold; }

JavaScript

function PrintCtrl($scope, $window, $q, $timeout)  {
		$scope.items = [
        
			{Name: "Soap", Price: "25", Quantity: "10"},
			{Name: "Shaving cream", Price: "50", Quantity: "15"}
        ];
    
        $scope.newitems= [
			{Name: "Shampoo", Price: "100", Quantity: "5"}
		];

    $scope.printOverallReport = function () {
     $scope.items.push(this.$scope.newitems);
        //$scope.items = $scope.newitems;
        console.log($scope.items.length);
        $timeout($window.print, 0);
        console.log($scope.items.length);
      };
    
}