AngularJS：コントローラーのネストとクリックイベント

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/dHzye

HTML

<div ng-app>
  <div ng-controller="jojos">
    <ul>
      <li ng-repeat="jojo in jojos" ng-controller="jojoController">
        {{jojo.name}} / {{jojo.score}}
        <button ng-click="scoreUp()">+1</button>
      </li>
    </ul>
  </div>
</div>

2行目でまずはAngularJSコントローラーの「jojos」を呼び出し、4行目のリピートを使い後述のJavaScriptで定義している配列を出力しています。

同じく4行目で、もうひとつのコントローラー「jojoController」を呼び出しています。
コントローラーの中で別のコントローラーを呼び出すことも可能です。

ボタンに「ng-click」で「jojoController」で定義されている「scoreUp」を実行させるようにしています。

JavaScript

var jojos = function($scope){
  $scope.jojos = [
    {'name': 'jonasun', 'score': '11.11'},
    {'name': 'joseph', 'score': '22.22'},
    {'name': 'jotaro', 'score': '33.33'}
  ];
};
var jojoController = function($scope){
  $scope.scoreUp = function() {
    $scope.jojo.score++;
  }
}

1行目からの「jojos」は配列を定義しているだけです。

8行目からの「jojoController」は、変数内のスコアを加算する処理をしています。
JS内ではイベントの記述は特にせず、HTMLテンプレート側でイベントのトリガーを置くのが特長です。