title: AngularJS: how do I get the hash value within the URL
body: <p>AngularJS noob here.</p>
  
  <p>I want my application to be able to respond to a url hash. By respond I mean simple stuff like set a variable value.</p>
  
  <p>In this example, if the url is <strong><em>http:example.com/#parents-to-be</em></strong>, I want the app to perform the standard behaviour which is scroll to <strong><em>#parents-to-be</em></strong>, and also set <strong><em>$scope.tab3 = 1;</em></strong></p>
  
  <p>From doing some research, it seems like this can be achieved with a combination of <strong><em>$location.hash()</em></strong> and <strong><em>$anchorScroll()</em></strong>. However, I haven't been successful thus far. Can someone please help?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div ng-app="bug"&gt;
      &lt;div ng-controller="TabsController"&gt;
          &lt;a href ng-click="activateTab(1)"&gt;tab 1&lt;/a&gt;
          &lt;a href ng-click="activateTab(2)"&gt;tab 2&lt;/a&gt;
          &lt;a href ng-click="activateTab(3)"&gt;tab 3&lt;/a&gt;
  
          &lt;div id="parents-to-be"&gt; &lt;!-- this is the target div --&gt;
              &lt;div ng-show="tab1 === 1"&gt;content of tab 1&lt;/div&gt;
              &lt;div ng-show="tab2 === 1"&gt;content of tab 2&lt;/div&gt;
              &lt;div ng-show="tab3 === 1"&gt;content of tab 3&lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- /angular tabs controller scope --&gt;    
  &lt;/div&gt; &lt;!-- /angular app scope --&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>(function() {
          var app = angular.module('bug', []);
          app.controller('TabsController', function($scope, $location, $anchorScroll) {
              // init tabs
              $scope.initTabs = function() {
                  $scope.tab1 = 0;
                  $scope.tab2 = 0;
                  $scope.tab3 = 0;
              };
              // activate tabs
              $scope.activateTab = function(tab_index) {
                  $scope.initTabs();
                  $scope['tab' + tab_index] = 1;
              };
              // this is the part of the app where I try to get the hash value and edit the value of tab3
              $scope.hash_value = $location.hash();
              if ($scope.hash_value === "parents-to-be") {
                  $scope.activateTab(3);
                  $anchorScroll();
              }
          });
      })();
  </code></pre>
  
  <p>Thank you!</p>