title: Reload the angular controller for modal each time it opens
body: <p>I have defined a separate controllers for the base page and modal on that page which has a form with value contained from local storage. Issue is this modal controller loads the value for the modal elements when the page is loaded on DOM and shows that value each time it pops up. But it needs to load values from local storage each time it pops up as it needs to have separate values.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="resourceListController"&gt;
  &lt;table&gt;
      &lt;tbody&gt;
                  &lt;tr ng-repeat="resource in filteredList|orderBy:orderProperty:reverse" ng-click="showDetails(resource)" data-toggle="modal" data-target="#resourceDetailModal"&gt;
                          &lt;td&gt; {{resource.ResourceName}}&lt;/td&gt;
                          &lt;td&gt; {{resource.Age}}&lt;/td&gt;
                      &lt;/tr&gt;
              &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div&gt;
  
  
  
  &lt;!-- Resource Detail Modal--&gt;
  &lt;div class="modal fade" id="resourceDetailModal" tabindex="-1" ng-cloak ng-controller="resourceDetailController"&gt;
  &lt;div class="modal-dialog modal-lg"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form class="form-horizontal"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-xs-4"&gt;Resource Name&lt;/label&gt;
                      &lt;div class="col-xs-8"&gt;&lt;label class="form-control"&gt;{{resource.ResourceName}}&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-xs-4"&gt;Age&lt;/label&gt;
                      &lt;div class="col-xs-8"&gt;&lt;label class="form-control"&gt;{{resource.Age}}&lt;/label&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Angular script:
  resourceListController:</p>
  
  <pre><code> $scope.showDetails = function(resource) {
      localStorage.setItem("res", JSON.stringify(resource));
  };
  </code></pre>
  
  <p>resourceDetailController:</p>
  
  <pre><code>resourceApp.controller('resourceDetailController', function($scope) {
     $scope.resource = JSON.parse(localStorage.getItem("res"));
  });
  </code></pre>