Norgul Norgul - 7 months ago 81
AngularJS Question

Ionic header item count

I want my nav-bar to be able to count items placed in basket.

Part of


<ion-nav-bar class="bar-dark" ng-controller="navBarCtrl">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back"></ion-nav-back-button>
<ion-nav-buttons side="secondary">
<div ng-include="" src="'templates/partials/navigation.html'"></div>

Here is the nav-bar partial:

<a class="button button-icon icon ion-person" ng-href="#/editUserDetails"></a>
<a class="button button-icon icon ion-android-cart" ng-href="#/cart">
<span class="badge badge-assertive">{{item.count}}</span>
<button class="button button-icon icon ion-android-more-vertical" ng-click="showActionsheet()"></button>

And here is
which returns item count from API:

.controller('navBarCtrl', ['Injection', '$scope', '$http', 'SERVER', function (Injection, $scope, $http, SERVER) {
Injection.ResourceFactory.getResource($http, SERVER, 'order/itemCount')
.then(function (response) {
$scope.item = {count:};


When traversing between views the count doesn't update, and upon using Chrome inspection tool, the network shows that route is not called more than one time when I run the app. If I refresh with F5 the count could I fix that?


Count update in API (Laravel PHP):

public function orderItemCount()
$user = $this->authUserAndCreateOrder();
$count = $user->orders->last()->order_items->count();
if (!empty($count)) {
return Response::json([
'itemCount' => $count,
return Response::json([
'itemCount' => 0,

I have also tried setting it manually when item is placed in the cart so that local storage updates:

confirmAddingToCartPopup: function ($ionicPopup, $state, $scope) {


$scope.item = {count:localStorage.getItem('countItem')};
localStorage.setItem('countItem', ++$scope.item.count);


I guess that your navbar is placed in index.html, so it's not treated as partial view like the ones which are injected with ng-view. This way your navbar controller is initialized only once, so your service will be called once as well. I can think of a few solutions in this case:

Solution 1

Create an Angular service which will provide a method to update items count in your navbar. Think of possible places in your application where this count should be updated (for example after adding an item to the basket) and invoke the update method there.

Solution 2

If you want to update the counter after route change, you can attach a handler for $locationChangeStart event:

$scope.$on('$locationChangeStart', function(event) {

function updateBasketCounter() {
    Injection.ResourceFactory.getResource($http, SERVER, 'order/itemCount')
            .then(function (response) {
                $scope.item = {count:};

This could be done in navbar controller as it's loaded only once in the application.

Solution 3

You can set an interval which will update basket counter e.g. 10 times a minute or so.

var intervalTimeMs = 6000;

$interval(updateBasketCounter, intervalTimerMs);

This would be a good solution if the basket counter could be updated from outside the application. Otherwise, I would stick to solution 1 or 2.