Restangular and UI-Bootstrap first page appears blank - angularjs

Question

I am currently getting to grips with Restangular and seem to be making some headway. I have opted to use the UI-Bootstrap for the ease of use, as I am use to working with bootstrap before.
My current issue is that I have pagination working for my controller, however the results do not appear when you first visit the page. If I visit the second page and then go back to the first page the results are there as expected. If I then choose to reload the page in anyway the results on the first page do not appear.
My code is as follows:
app.controller('BillsListCtrl', function ($scope, BillRepository) {
$scope.filteredBills = [],
$scope.currentPage = 1,
$scope.itemsPerPage = 10;
$scope.bills = BillRepository.getList();
$scope.$watch('currentPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredBills = $scope.bills.slice(begin, end);
});
console.log($scope.filteredBills);
});
The Repository:
app.factory('AbstractRepository', [
function () {
function AbstractRepository(restangular, route) {
this.restangular = restangular;
this.route = route;
}
AbstractRepository.prototype = {
getList: function (params) {
return this.restangular.all(this.route).getList(params).$object;
},
get: function (id) {
return this.restangular.one(this.route, id).get();
},
getView: function (id) {
return this.restangular.one(this.route, id).one(this.route + 'view').get();
},
update: function (updatedResource) {
return updatedResource.put().$object;
},
create: function (newResource) {
return this.restangular.all(this.route).post(newResource);
},
remove: function (object) {
return this.restangular.one(this.route, object.id).remove();
}
};
AbstractRepository.extend = function (repository) {
repository.prototype = Object.create(AbstractRepository.prototype);
repository.prototype.constructor = repository;
};
return AbstractRepository;
}
]);
Setting up the BillRepository:
app.factory('BillRepository', ['Restangular', 'AbstractRepository',
function (restangular, AbstractRepository) {
function BillRepository() {
AbstractRepository.call(this, restangular, 'bills');
}
AbstractRepository.extend(BillRepository);
return new BillRepository();
}
]);
Any light you can shed on this issue would greatly be appreciated!

Answer 1

If $scope.filteredBills is what's being displayed on the page, you're only populating that variable when the currentPage variable is changed. When your code runs for the first time, you set the variable and then set the watch on it, so it doesn't change and filteredBills does not get set.

Answer 2

Thanks goes to #ErikAGriffin for his help with this.
I made a change in my repository and removed the $object as shown below:
getList: function (params) {
return this.restangular.all(this.route).getList(params);
},
Then my controller changed to the following:
app.controller('BillsListCtrl', function ($scope, BillRepository) {
$scope.filteredBills = [],
$scope.currentPage = 1,
$scope.itemsPerPage = 10;
$scope.bills = BillRepository.getList().$object;
BillRepository.getList().then(function(data){
$scope.filteredBills = data.slice(0, $scope.itemsPerPage);
});
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredBills = $scope.bills.slice(begin, end);
});
});