How to make anchor links with AngularJS?

Question

Angular

How to make anchor links work with Angular? the essence of this is a page with code:

<a href="#info">info</a>
<section id="info">
Info....
</section>

Usually everything works, but if you connect the angular, then instead of index#info, index/#/info appears in the address bar and, accordingly, no transition occurs.
How to do this without crutches and hardcode, because I think the creators of angular should have taken care of the navigation inside the page?

Answer 1

Everything is not very simple here.
There is such a service: https://docs.angularjs.org/api/ng/service/$anchorScroll
With it, you can do something like this:

// some controller
['$scope', $anchorScroll, function($scope, $anchorScroll) {
    $scope.scrollTo = function(id) {
        $location.hash(id);
        $anchorScroll();
    }
}];

If hashes are used everywhere only in the case of anchors, you can hang processing on the onLocationChangeSuccess event.

$rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
});