Scroll down/up using AngularJS

var ScrollApp = angular.module('MyApp.ScrollApp', ['duScroll']).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'];
    }
);

ScrollApp.directive('myScroll', [ function () {
    return {
        restrict: 'E',
        template: '<div id="template" style="position:fixed; top: 2px;left: 35px;"><input type="button" value="up"  ng-click="up()"><input type="button" value="down" ng-click="down()"></div>',
        scope: {
            ids: '='
        },
        controller: ['$scope','$location','$anchorScroll', function ($scope, $location, $anchorScroll) {

            var current = 0;

            var scrollTo = function (id) {
                $location.hash($scope.ids[id]);
                $anchorScroll();
            };

            $scope.down = function () {
                if ($scope.ids.length - 1 > current)
                {
                    current++;
                    scrollTo(current);

                } else {
                    current = 0;
                    scrollTo(current);
                }
            };

            $scope.up = function () {
                if (current > 0)
                {
                    current--;
                    scrollTo(current);
                } else {
                    current = $scope.ids.length -1;
                    scrollTo(current);
                }

            }
        }]
    };
}]);

<!DOCTYPE html>
<html ng-app="MyApp.ScrollApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-scroll/1.0.0/angular-scroll.min.js"></script>
    <script src="app.js"></script>
    
  </head>
  <body ng-controller="ScrollCtrl">
    <my-scroll ids="ids"></my-scroll>
    <div ng-repeat="id in ids" style="height:500px; background-color:yellow;">
      <div id="{{id}}">
        <h3>{{id}}</h3>
      </div>
    </div>
  </body>
</html>

/* Put your css in here */