Reload the angular controller for modal each time it opens - angularjs

Question

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.
HTML:
<div ng-controller="resourceListController">
<table>
<tbody>
<tr ng-repeat="resource in filteredList|orderBy:orderProperty:reverse" ng-click="showDetails(resource)" data-toggle="modal" data-target="#resourceDetailModal">
<td> {{resource.ResourceName}}</td>
<td> {{resource.Age}}</td>
</tr>
</tbody>
</table>
<div>
<!-- Resource Detail Modal-->
<div class="modal fade" id="resourceDetailModal" tabindex="-1" ng-cloak ng-controller="resourceDetailController">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-4">Resource Name</label>
<div class="col-xs-8"><label class="form-control">{{resource.ResourceName}}</label></div>
</div>
<div class="form-group">
<label class="control-label col-xs-4">Age</label>
<div class="col-xs-8"><label class="form-control">{{resource.Age}}</label></div>
</div>
</form>
</div>
</div>
</div>
Angular script:
resourceListController:
$scope.showDetails = function(resource) {
localStorage.setItem("res", JSON.stringify(resource));
};
resourceDetailController:
resourceApp.controller('resourceDetailController', function($scope) {
$scope.resource = JSON.parse(localStorage.getItem("res"));
});

Answer 1

You can add below code in your resourceDetailController to update your modal data whenever it pops up.
Edit:
$scope.showDetails = function(resource) {
localStorage.setItem("res", JSON.stringify(resource));
$("#resourceDetailModal").modal();
};
$scope.data={};
$scope.data.filteredList=[{ResourceName:"AkankshaGupta ",Age:93},
{ResourceName:"Asha",Age:91}];
});
resourceApp.controller('resourceDetailController', function($scope) {
$( "#resourceDetailModal" ).on('show.bs.modal', function(){
$scope.resource = JSON.parse(localStorage.getItem("res"));
});
});
Please check this code
, it is working. I removed data-target instead showing modal manually
HTML:<tr ng-repeat="resource in data.filteredList" ng-click="showDetails(resource)"></tr>
I hope this helps