title: ng-include controller scope
body: <p>I am having a problem in AngularJs when using ng-include to include an html template that has its own controller.</p>
  
  <p>The problem in short is that I am able access scope variables defined in the controller of the included template in the template itself but can't do the opposite (accessing a model defined in the template inside its controller).</p>
  
  <p>This is my index.html page at which I include test.html template:</p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="app.js"&gt;&lt;/script&gt;
  
    &lt;body&gt;
      &lt;div ng-controller="TestController" ng-include="'test.html'"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the test.html template:</p>
  
  <pre><code>&lt;div&gt;
  {{foo}}
  &lt;br /&gt;
  &lt;input type="text" ng-model="username" /&gt;{{username}}
  &lt;br /&gt;
  &lt;button ng-click="go()"&gt;Click here&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And finally this is my controller:</p>
  
  <pre><code>myApp.controller('TestController', function($scope) {
    $scope.foo = 'Hello World';
    $scope.go = function() {
      console.log('Username = ' + $scope.username);
    }
  });
  </code></pre>
  
  <p>With no problem I can do the following:</p>
  
  <ul>
  <li>Accessing foo that is defined in the controller in the template</li>
  <li>Accessing username that is defined in the template in the template
  itself</li>
  </ul>
  
  <p>But I can't do the following</p>
  
  <ul>
  <li>Accessing username that is defined in the template in the controller
  (the output is undefined in the go() function)</li>
  </ul>
  
  <p>Here is a <a href="http://plnkr.co/edit/pNjsNZOV0SLRkINsxZGM" rel="nofollow">plunker</a>.</p>
  
  <p>Thanks in advance.</p>