title: Changing src of only hovered ng-include element, where value of src is a $scope variable
body: <p>I have multiple <code>ng-include</code> elements that have src attribute set to <code>$scope.template_url</code>.</p>
  
  <p>I want to change src of <strong>hovered element only</strong> to new template but changing it's value will change all of elements. How can i implement it?</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;section class="parent"&gt;
     &lt;div data-ng-include data-src="template_url"&gt;&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Javascript (in controller):</p>
  
  <pre><code>angular.element(document).on('mouseover', '.parent', function(){
    $scope.$apply(function () {
        $scope.template_url = "path/to/new/template.html";
    });
  });
  </code></pre>
  
  <p>Writing jQuery dom manipulation is dirty and also don't works:</p>
  
  <pre><code>$(this).attr('data-src', "path/to/new/template.html");
  </code></pre>