Angular: data read is undefined when trying to use pagination - angularjs

Question

I am trying to paginate a potentially very long list of divs. I have things working fine without the pagination however when I try to implement pagination (using this as a sort of template: http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview) I receive an error: TypeError: cannot read property 'slice' of undefined . As far as I can tell this is an issue involving the $scope.data variable since I am calling slice on $scope.data . I am not sure how to resolve this and get it working. I will post the working version without pagination followed by the erroneous version with pagination. The only differences in the controller are from the line filteredTodos onward. I am calling fetchAllSamples() which populated $scope.data before any other work is done with pagination so I'm not sure why it would be undefined. All help is much appreciated.
Erroneous pagination html:
<div>
<div>
<div class="col-md-12">
<div style="border: 1px solid #000000">
<div ng-repeat="item in filteredTodos" style="margin-left: 14px">
{{item.name}}
<br> <span style="font-size: 20px">{{item.description}}</span>
<br>
<hr>
</div>
</div>
</div>
<pagination ng-model="currentPage" total-items="data.length" max-size="maxSize" boundary-links="true"> </pagination>
</div>
</div>
and correct non-paginated:
<div>
<div>
<div class="col-md-12">
<div style="border: 1px solid #000000">
<div ng-repeat="item in data" style="margin-left: 14px">
{{item.name}}
<br> <span style="font-size: 20px">{{item.description}}</span>
<br>
<hr>
</div>
</div>
</div>
</div>
</div>
which use the following controller:
app.controller('SamplesQueryController','$scope','$http', function($scope, $http) {
$scope.newSampleName = {
sampleName: ''
};
$scope.attributes = [{
name: '',
value: ''
}];
$scope.sampleCount = 0;
$scope.addAttribute = function() {
var attribute = {
name: '',
value: ''
};
$scope.attributes.push(attribute);
}
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.headerCount = 0;
$scope.headers = new Array("Id", "Name", "URL", "Description");
$scope.fetchAllSamples = function() {
$scope.response = null;
$scope.method = 'GET';
$scope.url = '/api/samples';
$http({
method: $scope.method,
url: $scope.url
}).then(function(response) {
$scope.data = response.data;
angular.forEach(response.data,function(value,key) {
$scope.sampleCount += 1;
});
},
function(response) {
$scope.data = response.data || "Request failed";
}
);
};
$scope.createSample = function() {
$scope.response = null;
$scope.method = 'POST';
$scope.url = '/api/samples';
$http({
method: $scope.method,
url: $scope.url,
data: JSON.stringify({
name: $scope.newSampleName.sampleName,
attributes: $scope.attributes
})
}).then(function(response) {
$scope.fetchAllSamples();
});
};
$scope.fetchAllSamples();
$scope.filteredTodos = [], $scope.currentPage = 1, $scope.numPerPage = 10, $scope.maxSize = 5;
$scope.$watch('currentPage + numPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage),
end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.data.slice(begin, end);
});
}]);