title: Confused about Angularjs transcluded and isolate scopes & bindings
body: <p>I am struggling to understand the scope of models and their bindings in respect of directives which have limited scope. </p>
  
  <p>I get that restricting the scope on a directive means that controller.$scope and directive.scope are no longer the same thing. However, I am confused about how the placing of models either within the directive template or in the html affects data binding. I feel I'm missing something very fundamental and to move on I need to understand this.</p>
  
  <p>Take the following code (fiddle here: <a href="http://jsfiddle.net/2ams6/" rel="noreferrer">http://jsfiddle.net/2ams6/</a>)</p>
  
  <p>JavaScript</p>
  
  <pre><code>var app = angular.module('app',[]);
  app.controller('Ctrl',function($scope){
  });
  app.directive('testel', function(){
      return {
          restrict: 'E',
          scope: {
              title: '@'
          },
          transclude: true,
          template:   '&lt;div ng-transclude&gt;'+
                      '&lt;h3&gt;Template title: {{title}}&lt;/h3&gt;' +
                      '&lt;h3&gt;Template data.title:{{data.title}}&lt;/h3&gt;' +
                      '&lt;/div&gt;'
      }    
  }); 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-app='app'&gt;
      &lt;div ng-controller="Ctrl"&gt;
          &lt;input ng-model="data.title"&gt;
          &lt;testel title="{{data.title}}"&gt;
              &lt;h3&gt;Transclude title:{{title}}&lt;/span&gt;&lt;/h3&gt;
              &lt;h3&gt;Transclude data.title:{{data.title}}&lt;/h3&gt;
          &lt;/testel&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The model only updates <code>{{title}}</code> within the template, and <code>{{data.title}}</code> in the transclusion. <strong>Why not <code>{{title}}</code> in the transclusion nor <code>{{data.title}}</code> in the template?</strong></p>
  
  <p>Moving the input to within the transclusion like so (fiddle here: <a href="http://jsfiddle.net/eV8q8/1/" rel="noreferrer">http://jsfiddle.net/eV8q8/1/</a>):</p>
  
  <pre><code>&lt;div ng-controller="Ctrl"&gt;
      &lt;testel title="{{data.title}}"&gt;
          &lt;input ng-model="data.title"&gt;
           &lt;h3&gt;Transclude title: &lt;span style="color:red"&gt;{{title}}&lt;/span&gt;&lt;/h3&gt;
  
           &lt;h3&gt;Transclude data.title: &lt;span style="color:red"&gt;{{data.title}}&lt;/span&gt;&lt;/h3&gt;
  
      &lt;/testel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>now means only transclude <code>{{data:title}}</code> gets updated. <strong>Why not either template <code>{{title}}</code> or <code>{{data.title}}</code>, nor transclude <code>{{title}}</code>?</strong></p>
  
  <p>And finally, moving the input to within the template, like so (fiddle here: <a href="http://jsfiddle.net/4ngmf/2/" rel="noreferrer">http://jsfiddle.net/4ngmf/2/</a>):</p>
  
  <pre><code>template: '&lt;div ng-transclude&gt;' +
              '&lt;input ng-model="data.title" /&gt;' +
              '&lt;h3&gt;Template title: {{title}}&lt;/h3&gt;' +
              '&lt;h3&gt;Template data.title: {{data.title}}&lt;/h3&gt;' +
              '&lt;/div&gt;'
  </code></pre>
  
  <p>Now means that only template <code>{{data.title}}</code> gets updated. <strong>Again, why not the other 3 bindings?</strong></p>
  
  <p>I hope there is something obvious staring me in the face and I'm missing it. If you get me to get this, I'll buy you a beer, or give you some points, or some other such thing. Many thanks.</p>