title: Updating HTML element outside of ng-view
body: <p>I have the below HTML on a page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" ng-app="myCart"&gt;
  &lt;head&gt;
      &lt;title&gt;AngularJS Shopping Cart&lt;/title&gt;
      &lt;link href="css/jsonstore.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="header"&gt;
              &lt;h1&gt;The JSON Store&lt;/h1&gt;
              &lt;div class="cart-info"&gt;
                  My Cart (&lt;span class="cart-items"&gt;{{item.basketCount}}&lt;/span&gt; items)
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="main" ng-view&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="js/routing.js"&gt;&lt;/script&gt;
      &lt;script src="js/dataresource.js"&gt;&lt;/script&gt;
      &lt;script src="js/basketinfo.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
      &lt;script src="js/detail.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The div "main" gets replaced by HTML templates by my routes however I would like to update the header section with a shopping basket count.</p>
  
  <p>I have tried model binding it as shown in the HTML and below:</p>
  
  <pre><code>function DetailController($scope, item, basketDetail) {
      $scope.item = item;
      $scope.item.basketCount = basketDetail.getCount();
  
      //more code
  }
  </code></pre>
  
  <p>I've also tried just injecting the service and calling it from the HTML. Both ways do not do anything.</p>
  
  <p>Can someone help please?</p>
  
  <p>Thanks</p>