How to Handle Anchor Hash Linking in AngularJS ?

// script.js

var app = angular.module('myApp', []);

app.controller('MainController', ['$scope', 
               '$location', 
               '$anchorScroll', 
               function ($scope, $location, $anchorScroll) {
    $scope.items = [
        { id: 'courses', 
          name: 'Courses', 
          description:
'Discover a wide range of online courses offered by GeeksforGeeks, 
 covering various programming topics and technologies.' },
        { id: 'articles', 
          name: 'Articles', 
          description: 
'Access a vast collection of articles on programming, algorithms,
 data structures, and more at GeeksforGeeks.' },
        { id: 'practice',
          name: 'Practice', 
          description: 
'Improve your coding skills by practicing coding challenges, quizzes,
 and exercises available on the GeeksforGeeks platform.' }
 ];

    $scope.activeItemId = '';

    $scope.scrollToItem = function (itemId) {
        $scope.activeItemId = itemId;
        $location.hash(itemId);

        var scrollElement = document.getElementById(itemId);
        scrollElement.scrollIntoView({ behavior: 'smooth' });
    };
}]);

// script.js

var app = angular.module('myApp', []);

app.directive('hashLink', function () {
    return {
        restrict: 'E',
        template: 
'<span class="nav-link" ng-click="scrollToTarget(targetId)">{{content}}</span>',
        scope: {
            targetId: '@',
            content: '@'
        },
        link: function (scope, element, attrs) {
            scope.scrollToTarget = function (targetId) {
                var scrollElement = document.getElementById(targetId);
                scrollElement.scrollIntoView({ behavior: 'smooth' });
                scope.highlightSection(targetId);
            };

            scope.highlightSection = function (sectionId) {
                var descriptions = 
                    document.querySelectorAll('.description');
                descriptions.forEach(function (description) {
                    description.style.color = '#333';
                });

                var clickedDescription = 
                    document.querySelector(`#${sectionId} .description`);
                if (clickedDescription) {
                    clickedDescription.style.color = '#007bff';
                }
            };
        }
    };
});

app.controller('MainController', ['$scope', function ($scope) {
    $scope.sections = [
        { id: 'introduction', 
          name: 'Introduction', 
          description: 'Article on How to handle anchor hash
                        linking in AngularJS' },
        { id: 'implementation',
          name: 'Implementation', 
          description: 'Implementing hash linking using AngularJS directives.' },
        { id: 'example', 
          name: 'Example',
          description: 'This is example of hash linking.' }
    ];
}]);