title: How do I make a cart notification in AngularJs 1.5?
body: <p>I'm working on a project for school and got stuck.
  I made a shopping cart in Angular, but when I add an item the cart notification of the cart icon (<a href="https://i.stack.imgur.com/TxYmm.png" rel="nofollow noreferrer">Cart Icon</a>) doesn't update unless I refresh the page.</p>
  
  <p>cart.service.js</p>
  
  <pre><code>export default class Cart {
  
    constructor(AppConstants, $http) {
      'ngInject';
  
      this._AppConstants = AppConstants;
      this._$http = $http;
    }
  
    getCart() {
      return this._$http({
        url: this._AppConstants.api + '/cart',
        method: 'GET'
      }).then(
        (res) =&gt; {
          return res.data;
        }
      );
    }
  
    add(cover) {
      return this._$http({
        url: this._AppConstants.api + '/cart',
        method: 'POST',
        data: {
          cover: cover
        }
      }).then(
        (res) =&gt; {
          return res.data;
        }
      );
    }
  }
  </code></pre>
  
  <p>cart.component.js</p>
  
  <pre><code>class CartCtrl {
    constructor(Cart, $scope) {
      'ngInject';
  
      Cart.getCart().then((res) =&gt; { this._qty = res.qty &lt; 9 ? res.qty : 9 });
    }
  }
  
  let Cart = {
    controller: CartCtrl,
    templateUrl: 'components/cart.html'
  };
  
  export default Cart;
  </code></pre>
  
  <p>cart.html</p>
  
  <pre><code>&lt;a ng-href="/#/cart"&gt;&lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;span class="badge"&gt;{{$ctrl._qty}}&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>header.html</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="container"&gt;
          &lt;nav class="pull-right"&gt;
              &lt;ul class="list-inline"&gt;
                  &lt;li&gt;&lt;cart&gt;&lt;/cart&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>