AngularJS ng-click does not work in <li> tag

Question

I am creating a page list image using AngularJS. ng-clickdoesn't work when I use it in a tag <li>or even in a tag <a>. But it works fine in the tag <button>.

<div  ng-controller="sampleCtrl" ng-app="myApp" data-ng-init="currentpage=1">
            <h2>{{currentpage}}</h2>
        <ul>
             <li data-ng-repeat="image in images[currentpage-1]">
                <img src='{{ image.img }}' width="150px" height="88px"/>
             </li>
        </ul>


    <ul class="pagination">
        <li data-ng-repeat="i in [1,2,3,4,5]" title="Page {{i}}">
            <a href="#" data-ng-click="currentpage = currentpage + 1">{{i}}</a>
        </li>
    </ul>
    <button data-ng-click="currentpage = currentpage + 1">Click me!</button>

</div>

Does anyone know what the problem is?

By the way, I tried this answer , but it does not work.

Answer 1

This is because it ng-repeatcreates a new area for each repeating element. And when you do currentpage = currentpage + 1, you are most likely creating a new variable within the child domain.

. , $parent.currentpage = $parent.currentpage + 1 ( currentpage , sampleCtrl), .

, - , :

<a href="#" data-ng-click="increasePage()">{{i}}</a>

- :

$scope.increasePage = function() {
     currentpage++;
}