angularjs - angular ディレクティブの scope.$watch が適切に機能しない

Question

Angular と Bootstrap を使用しています。ブートストラップ チェックボックスの ng-model の機能を複製しようとしています。私が達成したいことは次のとおりです。

チェックボックス（実際にはラベル）をクリックするとモデルが変更され、実際には機能することを望みます...しかし、オブジェクトの変更を監視しようとすると、2回クリックする必要があるため、動作がおかしいということは機能しませんチェックボックスを無効または有効にするために1つ挿入されます。さらに、属性として cm-checkbox="model.prop" を持つ label 要素内に {{model.anotherprop}} を配置すると、動作しません (何もレンダリングしません)。

ドキュメントから、双方向のデータバインドが必要なため、スコープを定義する必要があることを理解しました。

ご協力ありがとうございました！

私は次のHTMLを持っています:

<label id="claim_free" class="checkbox" for="checkbox1" cm-checkbox="model.prop">
      <span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input name="claim_free" type="checkbox" value="" data-toggle="checkbox">
      same lable text
</label>

そして、次の JS:

directive('cmCheckbox', function() {
  return {
    restrict: 'A',
    scope: {'cmCheckbox':'='},
    link: function(scope,elm,attrs) {
      scope.$watch('cmCheckbox', function() {
          console.log("first value for "+attrs.cmCheckbox+" is: "+scope.cmCheckbox);
          if (!scope.cmCheckbox) {
            console.log("checked");
            $(elm).removeClass("checked");
            $(elm).children("input").removeAttr("checked");
          } else { // false and undefined
            console.log("unchecked");
            $(elm).addClass("checked");
            $(elm).children("input").attr("checked","checked");
          }
      });
      $(elm).on('click', function(e) {
        e.preventDefault();
        var currentValue = elm.hasClass("checked") ? false : true;
        scope.$apply(function() {
          scope.cmCheckbox = currentValue;
        },true);
        scope.$parent.$apply();
      });
    }
  };
}).

jsFiddle は次のとおりです: jsfiddle.net/pmcalabrese/66pCA/2