title: angular scope confusion
body: <p>So lets say I am writing a custom directive that loads a template into a div. My custom directive is called <code>loadClickedTpl</code>. When <code>loadClickedTpl</code> is clicked it should read the attribute and load the template into <code>#target</code>.</p>
  
  <p>So far my html looks something like this:</p>
  
  <pre><code> &lt;html np-app="mymodule"&gt;
        &lt;head&gt;...&lt;/head&gt;
        &lt;body&gt;
  
             &lt;a loadClickedTpl tplSrc="myTpl" &gt; Click Me to load template &lt;/a&gt;
  
             &lt;div id="target" ng-include src="clickedTpl"&gt;&lt;/div&gt;
  
             &lt;script type="text/ng-template" id="myTpl"&gt;
                  &lt;h1&gt;Loaded&lt;/h1&gt;
             &lt;/script&gt;
  
        &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>The problem is setting the <code>clickedTpl</code> var to point to the template. If its done in the html like so <code>&lt;div id="target" ng-include src="'myTpl'"&gt;&lt;/div&gt;</code> it works fine, doing it programmatically is proving to be a challenge. Here is what I have tried so far:</p>
  
  <pre><code>angular.module('loadATpl').directive 'loadClickedTpl', -&gt;
       (scope, element, attrs) -&gt;
             element.bind 'click', -&gt; 
                  # does not work
                  scope.clickedTpl = attrs.tplSrc
  
                  # also does not work
                  angular.injector(['ng']).invoke ($rootScope) -&gt;
                         $rootScope.clickedTpl = attrs.tplSrc
  
                  # obviously does not work
                  clickedTpl = atts.tplSrc
  
  angular.module('mymodule', ['loadATpl'])
  </code></pre>
  
  <p>The click binding does work, but that is were it ends.</p>