AngularJS で ng-repeat の中の ng-click でハマったのでメモ

(AngularJS1.0.7)

※このエントリーは何かの勘違いか間違い（1.0.7 から 1.2.0 にバージョン上げたら動かなくなった）
(angular1.0.7)

ページネーションの実装してて ng-repeat でページ番号を入れた配列を回して ng-click を表示させようとしたらリンクが効かなくてハマった。

問題

ng-repeat の外で

  <a href="" ng-click="currentPage = 2">2</a>

などとやるとリンクに飛べるのだが
下記のように ng-repeat の中の ng-click だとリンクに飛べなくなった

    <li ng-repeat="page in [1,2,3]">
      <a href="" ng-click="currentPage = {{ page }}">{{ page }}</a>
    </li>

webブラウザに表示してhtmlを確認すると ng-cliek の page が数字に展開されてない

原因その１

ng-repeat の中で配列要素をバインドする場合はオブジェクトにしないと行けないらしい。

ng-repeatディレクティブ中では配列要素がバインドできない? - Kazzzの日記

    <li ng-repeat="page in [{'number':1}, {'number':2}, {'number':3}]">
      <a href="" ng-click="currentPage = page.number">{{ page.number }}</a>
    </li>

webブラウザに表示してhtmlを確認すると今度は ng-cliek の page.number 部分が数になってる。
しかしリンク飛ばない。

原因その２

ng-click の中で代入できないのが問題かなと思い、関数にしてみた

    $scope.setCurrentPage = function(number) {
      $scope.currentPage = number;
    };

    <li ng-repeat="page in [{'number':1}, {'number':2}, {'number':3}]">
      <a href="" ng-click="setCurrentPage(page.number)">{{ page.number }}</a>
    </li>