Why ng-click function is executed twice?

Question

I include a view with the ng-include functionnality:

<footer ng-include="view" ng-controller="searchPresenter" class="searchW"> </footer>

My controller defines:

$scope.view = 'search/minView.html';

$scope.search = function() {
    $scope.view = 'search/mainView.html';

    jQuery('html').click(function(event) {
        $scope.view = 'search/minView.html';
        console.log($scope.view)            
    });
};

The search function is used only into the first view included:

<div class="..." ng-click="search()">
    <i class="search icon"></i>
</div>

But when I click for the first time on the view I just load, the jQuery function is executed (I see it into the console) whereas it shouldn't.

And then when I click anywhere on my page, the console show me 2 new lines whereas only 1 event should be registred onto the html content.

Any idea?

Answer 1

You should not have jQuery anywhere in your controller. You have an ng-click event already there, so adding the jQuery is not only a duplicate of the click event but totally not the Angular way of doing things. Your ng-click event is all you need to change the value of the $scope variable.

$scope.view = 'search/minView.html';

$scope.search = function() {
    $scope.view = 'search/mainView.html';
};