title: AngularJS $location without templates
body: <p>I would like to use the <code>$locationProvider</code> service in AngularJS without rendering a new HTML template in my <code>ng-view</code>.</p>
  
  <p>I have a <code>div</code> element that is shown on demand via <code>ng-show</code> binding to the existence of a data element. I would like to wire this to the browser location via the <code>$locationProvider</code> but stay within the same template.</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div&gt; other stuff ... &lt;/div&gt;
  
  &lt;div ng-show="model"&gt;{{ model.element }}&lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>Controller = function($scope, $location) {
    $scope.show = function() {
      $scope.model = model;    // show div
    }
  
    $scope.hide = function() {
      $scope.model = null;    // hide div
    }
  }
  </code></pre>
  
  <p>I can't figure out how to integrate the <code>$location</code> service in this. AngularJS also overwrites the location if it is set with <code>history.pushState</code> directly.</p>