How to refer DOM elements ID using "a href" inside views - Angular JS

Question

I have tried to find some solution on google about this but couldn't get an exact answer.

I am trying to change tabs inside a view using below code:

            <ul class="nav nav-tabs">
                <li class="{active: selectedTab === 'details'}"><a href ng-click="selectTab('details')">Details</a></li>
                <li class="{active: selectedTab === 'size'}"><a href ng-click="selectTab('size')">Size</a></li>
                <li class="{active: selectedTab === 'shipping'}"><a href ng-click="selectTab('shipping')">Shipping</a></li>
            </ul>

But whenever I am clicking on "Size" tab, the view redirects to some page. I mean URL changes from http://localhost:8080/abcd/index.html#/ TO http://localhost:8080/Final_Albatross/index.html#/size

Without view implementation, the click refers to id "size" and tab changes.

Definitely angular is treating this click as a new view call. Please help me out!!

My JS file:

mainAngular.controller('ProductDetailController', function($scope, $routeParams) {
$scope.prod_Id = $routeParams.prodId;
$scope.selectTab = function(tabName) {
    alert(tabName);
    $scope.selectedTab = tabName;
    alert($scope.selectedTab);
}
});

Although I have achieved it using "target="_self" but I want to do it in angular way.

Answer 1

Using anchor links in Angular require target="_self". https://docs.angularjs.org/guide/$location

<ul>
    <li><a href="#linktoroute">Link</a></li>
    <li><a href="#anchor" target="_self">Anchor</a></li>
</ul>