title: angularjs route - jump to specific page section on route link
body: <p>I am trying to make some kind of a mix between an Angular anchor and routing...</p>
  
  <p>I do have it working in the home page, since the anchor sections are there, however, if I am in another page, it does not.</p>
  
  <p>Can anyone point me in the right direction on how to do it correctly, please?</p>
  
  <p>Here´s what I have so far</p>
  
  <pre><code>freddoApp.config(function($routeProvider, $locationProvider) {
      $routeProvider
  
      // route for the home page
      .when('/', {
          templateUrl : 'pages/home/home.html',
          controller  : 'mainController'
      })
  
      // route for the productos page
      .when('/productos', {
          templateUrl : 'pages/home/home.html',
          controller  : 'mainController'
      })
  
      // route for the unico page
      .when('/unico', {
          templateUrl : 'pages/home/home.html',
          controller  : 'mainController'
      })
  
      // route for the sabores page
      .when('/sabores', {
          templateUrl : 'pages/home/home.html',
          controller  : 'mainController'
      })
  
      // route for the locales page
      .when('/locales', {
          templateUrl : 'pages/locales/locales.html',
          controller  : 'storeController'
      })
  
      // route for the servicios page
      .when('/servicios', {
          templateUrl : 'pages/servicios/servicios.html',
          controller  : 'servicesController'
      })
  
      // route for the about page
      .when('/about', {
          templateUrl : 'pages/about/about.html',
          controller  : 'aboutController'
      })
  
      // route for the contact page
      .when('/contact', {
          templateUrl : 'pages/contact/contact.html',
          controller  : 'contactController'
      });
  
      // use the HTML5 History API
      $locationProvider.html5Mode(true);
  });
  </code></pre>
  
  <p>/............................./</p>
  
  <pre><code>    freddoApp.controller('mainController', function($scope, $location, $anchorScroll) {
  
      $scope.scrollTo = function(id) {
          $location.hash(id);
          $anchorScroll();
      };
  </code></pre>
  
  <p>/............................./</p>
  
  <p>(HTML)</p>
  
  <pre><code>&lt;div id="freedo-nav-bar" class="collapse navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a ng-click="scrollTo('productos')"&gt;Productos&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a ng-click="scrollTo('unico')"&gt; Freddo Único&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a ng-click="scrollTo('sabores')"&gt; Sabores&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#locales"&gt; Locales&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#servicios"&gt; Servicios&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt; Nosotros&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact"&gt; Contacto&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>