title: Keeping model while navigation using angularjs
body: <p>I just started to learn angularjs and I have a question:</p>
  
  <p>I am trying to create a view with a table of entities with an update button. When the Upadte button is pressed I want to navigate to another view to edit the entity.</p>
  
  <p>In my main page I used this to load my different view into:</p>
  
  <pre><code>&lt;div ng-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I used ASP.NET MVC to create partial views for the list of entites and the update form.</p>
  
  <p>These two partial views use the same angular controller.</p>
  
  <p>To display the list:</p>
  
  <pre><code>&lt;div ng-controller="CompaniesController"&gt;
      &lt;table id="tblCompaniesCollection"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
   ...
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody ng-repeat="Company in Companies"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;span&gt;{{Company.Name}}&lt;/span&gt;&lt;/td&gt;
   ...
                  &lt;td&gt;
                      &lt;button type="button" ng-click="ChangeView(Company)"&gt;Go to edit&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To update:</p>
  
  <pre><code>&lt;div ng-controller="CompaniesController"&gt;
      &lt;table id="tblCompanyToEdit"&gt;
          &lt;tbody &gt;
              &lt;tr &gt;
                  &lt;td&gt;Name&lt;/td&gt;
                  &lt;td&gt;&lt;span&gt;{{CompanyToEdit.Name}}&lt;/span&gt;&lt;/td&gt;
                  &lt;/tr&gt;
      ...
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the ChangeView(Company) function I do the following:</p>
  
  <pre><code>$scope.ChangeView = function (Company) {
  
      $scope.CompanyToEdit = Company
      $location.path('/EditCompany');
  };
  </code></pre>
  
  <p>What I tried to achieve:</p>
  
  <ul>
  <li><p>Have a simple partial view for the view of list of entites and the<br>
  update view.</p></li>
  <li><p>After the view of list of entites is loaded into it's place, it<br>
  gets the data from the same web application via WEB API<br>
  controller.</p></li>
  </ul>
  
  <p>It is working till this point.</p>
  
  <p>What is not working:</p>
  
  <ul>
  <li><p>When I click the button store the selected entity in the
  <code>$scope.CompanyToEdit</code> and load it into the view.</p></li>
  <li><p>This way I would not have to create another request to the server to 
  get the company to edit, but the angular controller recreated on<br>
  navigating and I lost my data.</p></li>
  </ul>
  
  <p>How do you solve this wiht angular? Please tell me if my aproach is not good.</p>