title: AngularJS ngInclude dynamically changing its location
body: <p>I have a few partial templates where the location is changed based on user actions via ng-click:</p>
  
  <pre><code>&lt;div ng-include="contentUrl"&gt;&lt;/div&gt;
  
  &lt;button ng-click="contentUrl = '../partials/testScriptForm.html'"&gt;Add Test Script&lt;/button&gt;
  </code></pre>
  
  <p>This works great unless I the button above is inside of the partial itself, so if testScriptForm.html has a button:</p>
  
  <pre><code>&lt;button ng-click="contentUrl = '../partials/testScriptCase.html'"&gt;Add Test Case&lt;/button&gt;
  </code></pre>
  
  <p>Then nothing happens.</p>
  
  <p>This seems due to ng-include getting a new (inherited but not shared?) scope.</p>
  
  <p>What I can't figure is how to get the included template (partial) to change its own location.  </p>
  
  <p>I did try a function to change the $scope.$parent.contentUrl, it does seem to change but not "propagate" the changes.</p>
  
  <p>In coffeescript:</p>
  
  <pre><code>  $scope.changeParentLocation = (location) -&gt;
        $scope.$parent.contentUrl = location
  </code></pre>
  
  <p>Also tried to $scope.$apply() and $scope.$parent.$apply() in there and get the error:</p>
  
  <blockquote>
    <p>Error: [$rootScope:inprog]
    <a href="http://errors.angularjs.org/1.2.0rc1/" rel="noreferrer">http://errors.angularjs.org/1.2.0rc1/</a>$rootScope/inprog?p0=%24apply</p>
  </blockquote>
  
  <p>Maybe I'm just mis-using includes...</p>