title: Why does two way binding sometimes work without using a dot in Angular?
body: <p>Consider this fiddle: <a href="http://jsfiddle.net/martijngr/Qvu5u/1/" rel="nofollow">Fiddle 1</a> When you select a date, you will notice that the text above it is not updating. This is because I had to use an object in my list, like this: <a href="http://jsfiddle.net/Qvu5u/3/" rel="nofollow">Fiddle 2</a> (simplified).</p>
  
  <p>But, on the other hand, this does work, without a dot: <a href="http://jsfiddle.net/martijngr/DnKs5//" rel="nofollow">Fiddle 3</a></p>
  
  <p>Could someone explain what the difference is between fiddle 1 and fiddle 3? I've read about prototypical inheritance (<a href="https://github.com/angular/angular.js/wiki/Understanding-Scopes" rel="nofollow">unerstanding scopes</a>), but I don't understand this behavior.</p>
  
  <p>Fiddle 3:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
    Hello, {{name}}!
  
  
    &lt;button ng-click="visible = !visible"&gt;Toggle&lt;/button&gt;
  
    &lt;div ng-show="visible"&gt;
      Some content 
      &lt;sample visible="visible"&gt;&lt;/sample&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  function MyCtrl($scope) {
      $scope.name = 'Superhero';
      $scope.visible = true;
  }
  
  myApp.directive("sample", function(){
      return {
          restrict: 'E',
          template: '&lt;span ng-click="hide()" style="cursor: pointer;"&gt;X&lt;/span&gt;',
          scope:{
              visible: '='
          },
          link: function(scope, element, attributes){
              scope.hide = function(){
                  console.log(scope.visible);
                  scope.visible = false;
              }
          }
      }
  });
  </code></pre>