AngularJS pagination with laravel model - pagination bar is not displayed properly - php

Question

Here is my AngularJS code for building the pagination with angular bootstrap pagination:
$scope.employees = [],
$scope.currentPage = 0,
$scope.numPerPage = 2,
$scope.totalItems = '',
$scope.maxSize = 2;
$scope.getEmployee = function (offset) {
$http.get('/employee/'+offset).then(function (response) {
$scope.employees = response.data.data;
$scope.totalItems= response.data.totalRows;
console.log($scope.totalItems);
});
};
$scope.getEmployee(0);
$scope.getPage = function () {
$scope.getEmployee($scope.currentPage === 1 ? 0 : $scope.currentPage);
};
Trying to list 2 employees per page (Now i have 6 rows in mysql query)
Laravel controller
public function getTotalEmployees($offset)
{
$result = Company::limit(2)->offset($offset)->get();
return response()->json(array('data'=>$result,'totalRows'=>Company::count()));
}
query will give correct output but the paginationbar is not properly displayed.
HTML
<ul>
<li ng-repeat="emp in employees">{{emp.name}}</li>
</ul>
<pagination
ng-model="currentPage"
total-items="20"
max-size="maxSize"
boundary-links="true"
ng-change="getPage()">
</pagination>
I think its the problem with totalItems value but i can't fixed it here is screenshot of the pagination bar
I can't select the next and previous buttons its disabled

Answer 1

Somethink like this. I'm not that familiar with laravel but it should work with mini modifications for you. I added an other controller action in laravel which return you the total count of your items. This API endpoint is called on this.$onInit which is a methods available since AngularJS 1.5. It will be called when the controller is initialized. Here is a simple fiddle demo with an pagination example.
AngularJS controller
$scope.employees = [],
$scope.currentPage = 0,
$scope.numPerPage = 2,
$scope.totalItems = 0,
$scope.maxSize = 2;
this.$onInit = function () {
$scope.getEmployee();
$http.get('/employee/getTotalCount').then(function (response) {
$scope.totalItems = response.data.count;
});
};
$scope.getEmployee = function () {
$http.get('/employee/getItems/'+ ($scope.currentPage * $scope.numPerPage) +'/' + $scope.numPerPage).then(function (response) {
$scope.employees = response.data.data;
});
};
$scope.getPage = function () {
$scope.getEmployee();
};
Laravel controller
public function getTotalCount()
{
$companies = Company::all();
return response()->json('count' => $companies->count());
}
public function getItems($offset, $limit)
{
$result = Company::limit($limit)->offset($offset)->get();
return response()->json(array('data'=>$result));
}