ng click inside li <a> element not working inside ng-repeat

Question

In my html I have something like this :

   <div class="list-table-wrapper embedded-medium">
                <table class="list-table embedded-list-table">
                    <thead>
                        <tr>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Account Name</span>
                                    <span class="table-sort-indicator"></span>
                                </a>
                            </th>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Service Level</span>

                                </a>
                            </th>

                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.items | limitTo : vm.pageSize : (vm.currentPage-1)*vm.pageSize">
                            <td class="table-link"><a ng-link="['MigrationStatus']" class="ng-binding" href="migration-status.html">{{item.accountName}}</a></td>
                            <td class="table-text">{{item.serviceLevel}}</td>
                            <td class="table-input">
                                <div class="btn-group">
                                    <div class="dropdown">
                                        <div class="dropdown-toggle" ng-click="batch.showSettings = !batch.showSettings"></div>
                                        <ul class="dropdown-menu visible" ng-show="batch.showSettings">
                                            <li><span class="dropdown-category">Manage</span></li>
                                            <li class=""><a href="#" ng-click="removeAccount(item.accountName)">Remove from Panel</a></li>
                                            <li class=""><a href="#">View in Encore</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>

Now in my component I am simply console logging the same:

            vm.removeAccount = function(accountName){
                console.log(accountName);
            }

But it is simply redirecting to localhost:8000/# but not logging anything in console.

UPDATE If I remove href="#" though it is not redirecting, it is not logging the data also.

What am I doing wrong ?

Answer 1

Remove href="#" from the anchor tags, which is redirecting to /# route. I guess you haven't configured for .otherwise state/route that's why you can't see any changes on UI.

You could make it as href="" that will not perform any redirection.

And then removeAccount method should have controllerAlias before it

ng-click="vm.removeAccount(item.accountName)"