angularjs: ng-click on <a> not working, works on <button>

Question

Here is the Javascript

    function gotoUrl($scope, $location, $http, $window) {
      $scope.setRoute = function (route) {
        $location.path(route);
    };

My code is

      <ul class="nav navbar-nav navbar">
            <li><a href="#" data-ng-click="setRoute('summary')"><span
                    class="icon-bar-chart"></span> Summary</a></li>
            <li><a href="#
            " data-ng-click="setRoute('transactions')"><span
                    class="icon-reorder"></span>
                Transactions</a></li>
            <li><a href="#" data-ng-click="setRoute('budgets')"><span
                    class="icon-calendar"></span>
                Budgets</a></li>
        </ul>

The routes are configured as

app.config(function ($routeProvider) {
    $routeProvider
        .when('/summary', {templateUrl: '../static/partials/summary.html', controller: 'SummaryController'})
        .when('/transactions', { templateUrl: '../static/partials/listTransaction.html', controller: 'TransactionsManagerController'})
        .when('/profile', {templateUrl: '../static/partials/profile.html', controller: 'ProfileController'})
        .when('/new', {templateUrl: '../static/partials/addTransaction.html', controller: 'TransactionAddController'})
        .when('/budgets', {templateUrl: '../static/partials/budgets.html'})
        .otherwise({redirectTo: '/summary'});
});

When I click on Transactions , it takes me to Summary

When I change the code from <a> to <button> , it works, what is that I am doing wrong here?

Answer 1

http://docs.angularjs.org/api/ng.directive:a

Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty .

Answer 2

Try setting href="" instead of href="#" . If you are using hashbang mode routing, the latter results in a full-page reload, which is what seems to be happening in your case as well. Any link with href="#" that you click will cause your app to fully reload the page and load the default route -- in your case Summary .

Answer 3

You can get rid of gotoUrl function and modify DOM to

<a href="#/transactions"><span></span>Transactions</a>

AngularJS will take care of the rest.

Answer 4

change this code segment

<li><a href="#
        " data-ng-click="setRoute('transactions')"><span
                class="icon-reorder"></span>
            Transactions</a></li>

to

<li><a href="/transactions"><span
                class="icon-reorder"></span>
            Transactions</a></li>