AngularJSでチェックボックスとモデルを紐付ける

AngularJSを使ったフォームでチェックボックスを使いたいとする。 このとき単に真偽値を取りたいのであればそのままモデルを設定すれば、checkboxの値（true/false）をモデルに紐付けることが出来る。

<input type="checkbox" ng-model="model" />

しかし真偽値以外の値をモデルに設定したい場合もある。 その場合にはngTrue, ngFalseディレクティブを使う。

<input type="checkbox" ng-model="model" ng-true="OK" ng-false="Fail" />

上記の例だとチェックが入っていればモデルの値は"OK"に、入ってなければ"Fail"にそれぞれ設定される。

ただし、これらの紐付けはモデルに対して行われる。つまり、モデルの変更がチェックボックス側に伝達されるわけではない。これはHTMLの仕様によるらしいが、自分の理解ではchecked属性のような真偽値を持つ属性が偽になった時、ブラウザ側で値が保持されないため、AngularJSのバインディングが切れてしまうことによるようだ。

そのためモデル側の変更に合わせてチェックボックスのチェックを付け外ししたい場合はngCheckedディレクティブを使う必要がある。

<input type="checkbox" ng-model="model" ng-checked="model" />
...
function CheckBoxController($scope){
  $scope.model = true;
}

上記のようにすれば、$scope.modelが設定されたタイミングでチェックボックス側のチェックも自動で入れることが出来る。