title: How to update a ng-include value when I click someWhere else than a div with angular?
body: <p>I've this very simplified html:</p>
  
  <pre><code>&lt;div ng-controller="Ctrl"&gt;
      &lt;div ng-include="template"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My template1.html only contains:</p>
  
  <pre><code>&lt;div id="i1" ng-click="clickFunction()"&gt;Content of template1.html&lt;/div&gt;
  </code></pre>
  
  <p>The template2.html:</p>
  
  <pre><code>    &lt;div id="i2"&gt; Content of template2.html &lt;/div&gt;
  </code></pre>
  
  <p>And the following JS :</p>
  
  <pre><code>function Ctrl($scope) {
      $scope.template = 'template1.html';
  
      $scope.clickFunction = function () {
          $scope.template = 'template2.html';
      }
  }
  </code></pre>
  
  <p>When I click on my included template my second template is loaded in place of the first one.</p>
  
  <p>What is the clean Angular method to replace back the template2 with the template 1 when I click everywhere else on my page (but not in my <code>ng-include</code> div)?</p>
  
  <p><strong><a href="http://jsfiddle.net/Fractaliste/MfHa6/251/" rel="nofollow">Here</a></strong> a basic fiddle if it can help.</p>
  
  <p><strong>Edit</strong> :</p>
  
  <p>I've tested to add the following code into my controller but the template view isn't updated (but the console.log yes, <a href="http://jsfiddle.net/Fractaliste/MfHa6/255/" rel="nofollow">very strange behaviour</a>...):</p>
  
  <pre><code>jQuery('html').click(function() {
      console.log('Click on HTML')
      $scope.template = 'template1.html';
  });
  
  jQuery('#i2').click(function(event){
      event.stopPropagation();
  });
  </code></pre>