title: How can I act on a hashchange event in AngularJs
body: <p>I'm a newbie to AngularJs.
  What I'm trying to do is update the page on hashchange events.</p>
  
  <p>What I currently do (and know is not the "right" way to go) is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      #hashdrop {
        display:block;
        border: 1px solid gray;
        width: 500px;
        overflow: auto;
        background-color: rgb(241,241,241);
        border-radius: 4px;
        text-align: center;
        vertical-align: middle;
        line-height: 100px;
        font-size: large;
        height: 100px;
      }
  &lt;/style&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var example = function($scope) {
        $scope.lastHash = location.hash.slice(1);
        $(window).on('hashchange', function (event) {
          $scope.lashHash = location.hash.slice(1);
          $scope.$apply();
        });
      };
  &lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;/head&gt;
  &lt;body ng-app ng-controller="example"&gt;
    &lt;div id="hashdrop" &gt;
      {{lastHash}}
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(This can be copy-pasted into a blank html file and run. jsbin didn't detect the haschange correctly, for me.)</p>
  
  <p>This doesn't really work. for some reason the value is not updated and I would assume there is a 'right' way to this in angularjs.<br>
  I would to understand how to do this right and more specifically how to correct the code in this example to work the "angular way".</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPDATE 1</strong>
  Okay, After reading the comment about $location, I found some information and change my app to this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      #hashdrop {
        display:block;
        border: 1px solid gray;
        width: 500px;
        overflow: auto;
        background-color: rgb(241,241,241);
        border-radius: 4px;
        text-align: center;
        vertical-align: middle;
        line-height: 100px;
        font-size: large;
        height: 100px;
      }
  &lt;/style&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      angular.module('example',[]).config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
      });
      var example = function($scope, $location) {
  
  
      };
  &lt;/script&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;/head&gt;
  &lt;body ng-app="example" ng-controller="example"&gt;
    &lt;div id="hashdrop" &gt;
      Hash = {{$location.hash()}}
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Still doesn't work. Nothing shows in output..</p>