dynamically change the path of href angular JS

Question

I am trying to change the href value on click of it.

This is what I have tried.

HTML:

<a href="#Page1">Demo</a>

JS:

    angular.config(function ($routeProvider) {
        $routeProvider
    .when('/Page1', {
            templateUrl: 'main.html'
            controller: 'FirstController'
        })
 .when('/Page2', {
            templateUrl: 'sub.html'
            controller: 'FirstController'
        })
.otherwise('main.html');

How do I change the path of the anchor tag everytime when I clicked on it.

Can anyone please help me out.

Solution 1

Use different controllers for each page. You can use a variable for link and set it in the related controller. For example:

<a href="#/{{myLink}}">Demo</a>

or

<a ng-href="#/{{myLink}}">Demo</a>

And in the each related controller:

$scope.myLink="page1";

or

$scope.myLink="page2";

etc.

Or if you insist to use same controller, you can check the location path:

if ($location.path().substring(1) == "page1") {
    $scope.myLink="page2";
}

Solution 2

Use ng-href instead - it will automatically update when the bound value changes.

Comments

[drew_w]

Its similar, but ng-href is a slightly better option!

[Julix]

not that useful without explaining or linking to an explanation for why it's a better option... - nevermind, just found it in a comment above and the other solution below.