title: scope.$watch in angular directive does not work proprely
body: <p>I'm using Angular and Bootstrap.
  I'm trying to replicate the functionality of ng-model for bootstrap checkbox. What i would like to accomplish is:</p>
  
  <p>i would like that when i click on the checkbox (label really) the model change, and actually that works... but what does not work that when i try to watch the object for changes the behavior is weired, because i need two click insted of one for disable or enable the checkbox.
  Moreover if inside the the label element that has as attribute cm-checkbox="model.prop" i put a {{model.anotherprop}} wont work (does not render anything).</p>
  
  <p>From the documentation i understood that because i want the two-way data bind the scope must be defined as i did.</p>
  
  <p>Thank you for your help!</p>
  
  <p>I have the following HTML:</p>
  
  <pre><code>&lt;label id="claim_free" class="checkbox" for="checkbox1" cm-checkbox="model.prop"&gt;
        &lt;span class="icons"&gt;&lt;span class="first-icon fui-checkbox-unchecked"&gt;&lt;/span&gt;&lt;span class="second-icon fui-checkbox-checked"&gt;&lt;/span&gt;&lt;/span&gt;&lt;input name="claim_free" type="checkbox" value="" data-toggle="checkbox"&gt;
        same lable text
  &lt;/label&gt;
  </code></pre>
  
  <p>And the following JS:</p>
  
  <pre><code>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();
        });
      }
    };
  }).
  </code></pre>
  
  <p>Here is the jsFiddle: <a href="http://jsfiddle.net/pmcalabrese/66pCA/2" rel="nofollow">jsfiddle.net/pmcalabrese/66pCA/2</a></p>