angularjs - Restangular and UI-Bootstrap first page appears blank -

i getting grips restangular , seem making headway. have opted use ui-bootstrap ease of use, use working bootstrap before.

my current issue have pagination working controller, results not appear when first visit page. if visit second page , go first page results there expected. if choose reload page in anyway results on first page not appear.

my code 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 billrepository:

app.factory('billrepository', ['restangular', 'abstractrepository',   function (restangular, abstractrepository) {      function billrepository() {       abstractrepository.call(this, restangular, 'bills');     }      abstractrepository.extend(billrepository);     return new billrepository();   } ]); 

any light can shed on issue appreciated!

if $scope.filteredbills what's being displayed on page, you're populating variable when currentpage variable changed. when code runs first time, set variable , set watch on it, doesn't change , filteredbills not set.