Angularjs: controller init function avoid init to be called - angularjs

Question

I have the following controller code:
applicationControllers.controller('PostsController', ['$scope', '$http', function
($scope, $http) {
var page = 1;
$scope.init = function() {
this.loadPage(page);
}
$scope.nextPage = function() {
page++;
this.loadPage(page);
}
$scope.previousPage = function() {
page--;
if (page <= 0) { page = 1 }
this.loadPage(page);
}
$scope.filterByProvince = function(provinceName) {
console.log(provinceName);
}
$scope.loadPage = function(page) {
$http.get('/posts.json?page=' + page).success(function(data) {
$scope.posts = data;
});
}
$scope.init();
}]);
The problem is when using a ng-click directive to filterByProvince('test'), it seems the init function are also called. I want to avoid this behaviour.
Any help?

Answer 1

In Angular, when you want to have an <a> element display like an <a> element, but used differently (e.g. as a button (by attaching some ngClick directive)), you should use an empty href:
Do something
The problem with using href="#" is that it is eihter:
Recognized by ngRoute (if it is used) as a "link" to the home route ('/'), so even if you are in that route it gets reloaded causing the effects of the ngClick callback to be voided or
Recognized by the browser as link with an anchor tag to the same page, so clicking it causes the page to reload (again voiding any effect of the ngClick callback).
I am not sure how ui-router handles this, but I am not a big fan of ui-router - maybe someone with more experience can give some feedback.