title: Change template in ng-include on ng-click
body: <p>Im trying to load different template after user authenticated him self in same place where login form  were. Ill probably figured out the problem, i think its because i am not working in same scope.</p>
  
  <p>i have a property in scope named template which i change on user successfully logged in there is a problem to this approach since if i call <code>AccountCtrl</code> again template will be overridden with login template again: </p>
  
  <pre><code>var AccountCtrl = WorkerApp.controller('AccountCtrl', function ($scope, $location, AccountService) {
  
      $scope.template = 'Home/Template/login';
  
      $scope.Login = function () {
                      $scope.template = "Home/Template/register";
              };
          };
      }    
  });
  </code></pre>
  
  <p>in my index.html i have  some html <strong><em>outside</em></strong> of ng-view:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="header"&gt;
          &lt;div class="loginView"&gt;
              &lt;div ng-include="template" ng-controller="AccountCtrl"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my login template</p>
  
  <pre><code>  &lt;form name="login" ng-controller="AccountCtrl"&gt;
          &lt;button class="btn btn-primary btn-sm" ng-click="Login()"&gt;Login&lt;/button&gt;
      {{template}}
  &lt;/form&gt;
  </code></pre>
  
  <p>Im quite new to Angular, and cant figure out which way will be the angular way to solve this problem.  in my template i could remove <code>ng-controller="AccountCtrl"</code> but then i cant call to login function in controller (I've tested that).</p>