javascript - Promises and pagination in AngularJS -

i have list of events i'm trying ng-repeat over. i'm using ui-bootstrap create pagination off of events. when hard code event data controller, able display , flip through them no problem. however, when try grab data service using promises, code breaks. have feeling it's because i'm not writing promise correctly (i'm new @ them) when page loads data hasn't yet been returned yet.

here controller:

app.controller("eventscontroller", ['$scope', 'eventsservice',       function($scope, eventsservice) {   $scope.events = [];   $scope.itemsperpage = 5; //items show per page   $scope.currentpage = 1;  //what page start on    eventsservice.getevents()     .then(function(data) {       $scope.events = data;     }, function(error) {      console.log(error);   });    $scope.totalitems = $scope.events.length;   //determines total # of pages  $scope.pagecount = function () {   return math.ceil($scope.events.length / $scope.itemsperpage);  };  $scope.$watch('currentpage + itemsperpage', function() {   var begin = (($scope.currentpage - 1) * $scope.itemsperpage),   end = begin + $scope.itemsperpage;   $scope.filteredevents = $scope.events.slice(begin, end);   }); }]); 

and service:

app.factory("eventsservice", function($http) {   return {     getevents : function() {       return $http.get("/../../../test_event_data.json")       .then(function(response) {         if(typeof response.data === 'object') {           return response.data;         } else {           return $q.reject(response.data);         }       }, function(response) {           return $q.reject(response.data);       });     }   } }); 

and view:

<div class="row">   <div class="col-lg-2">     <h3>filter results</h3>     <h3 class="pull-right">all</h3>     <h3 class="pull-right">events</h3>     <h3 class="pull-right">offerings</h3>   </div>  <div class="col-lg-10">     <h3>upcoming events&offerings</h3>     <div ng-repeat="event in filteredevents">        <h3>{{event.title}}</h3>        <p>{{event.location}}</p>        <p>{{event.time}}</p>        <p>{{event.description}}</p>     </div>     <pagination total-items="totalitems" items-per-page="itemsperpage" ng-model="currentpage" ng-change="pagechanged()"></pagination>  </div> </div> 

finally, sample of data i'm trying return:

[{"id":1,"title":"massa quis augue luctus tincidunt   nulla","location":"little fleur","time":"8:33 am","description":"rhoncus mauris enim leo rhoncus sed vestibulum sit amet cursus id","offering":true}, {"id":2,"title":"sapien ut nunc vestibulum ante","location":"leroy","time":"6:07 pm","description":"vestibulum proin eu mi nulla ac enim in tempor turpis nec euismod scelerisque quam turpis adipiscing lorem vitae","offering":false}, {"id":3,"title":"sagittis nam congue risus semper porta volutpat","location":"waubesa","time":"4:13 am","description":"nisi @ nibh in hac habitasse platea dictumst aliquam augue","offering":false}, {"id":4,"title":"consequat ut nulla sed","location":"dahle","time":"2:08 am","description":"ligula pellentesque ultrices phasellus id sapien in sapien iaculis congue vivamus metus","offering":false}] 

solved it:

turns out needed put logic inside of getevents function. so:

eventsservice.getevents() .then(function(data) {   $scope.events = data;   $scope.pagecount = function () {     return math.ceil($scope.events.length / $scope.itemsperpage);   };   $scope.totalitems = $scope.events.length;   $scope.$watch('currentpage + itemsperpage', function() {     var begin = (($scope.currentpage - 1) * $scope.itemsperpage),       end = begin + $scope.itemsperpage;     $scope.filteredevents = $scope.events.slice(begin, end);   }); }, function(error) {   console.log(error); });