Scroll to the next item id in the array

Question

I am currently using angular -scroll for my navigation, as shown below, which works great with links in the navigation bar:

var ScrollApp = angular.module('myApp.ScrollApp', ['duScroll', 'ngAnimate']).value('duScrollOffset', 60);

ScrollApp.controller('ScrollCtrl', function($scope){
        var container = angular.element(document.getElementById('container'));
        var sectionhome = angular.element(document.getElementById('Home'));
        $scope.toTheTop = function() {
            container.scrollTop(60, 5000);
        };
        $scope.toHome = function() {
            container.scrollTo(sectionhome, 60, 1000);
        };
        $scope.scrollVariable = false;
        $scope.ids = ['Section1', 'Section2', 'Section3'];
    }
);

Now, my question is:

How can I angular define the current section in the viewport and then one button with ng-clickto go to the next section in the array $scope.ids.

Also, once at the bottom, Angular will detect the bottom and ng-clickreverse.

I can't have jQuery dependencies, and I should have probably mentioned that I'm just learning AngularJS.

Answer 1

  <a ng-click="gotoSection("Section1")">Go to Section</a>
  <a id="Section1"></a>

 $scope.gotoSection= function(id) {
          // set the location.hash to the id of
          // the element you wish to scroll to.
          $location.hash(id);

          // call $anchorScroll()
          $anchorScroll();
        };