Reload List after Closing Modal - angularjs

Question

I have a list of brands:
<script type="text/ng-template" id="list.brands">
<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl">
<input type="text" ng-model="searchBox">
<thead>
<tr>
<th><tags:label text="brandid"/></th>
<th><tags:label text="name"/></th>
<th><tags:label text="isactive"/></th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox">
<td>{{brand.brandid}}</td>
<td>{{brand.name}}</td>
<td>{{brand.isactive}}</td>
<td>
<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>
<a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" ><tags:label text="delete"/></a>
</td>
</tr>
</tbody>
</table>
</script>
This list has brands line with 2 button; edit and delete. Edit button opens a modal of brand edit form:
<%#page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
In modal, save button saves modifications and closes the modal.
I want to reload the list after closing. How can I do it ? Controllers of list and modal is different.
How can I reload background of modal after close it ?

Answer 1

You can broadcast a method to communicate
try like this
In modal controller where close button is triggered
$rootScope.$broadcast('updateList');
If you wanna to pass data from modal
$rootScope.$broadcast('updateList',{data : 'passing'}); // pass object in {} if you wanna to pass anything
In data Controller
$scope.$on("updateList",function(){
// Post your code
});
If you passed data from modal
$scope.$on("updateList",function(e,a){
// Post your code
console.log(a.data);
});

Answer 2

If you are using angular UI $modal Service, then its pretty simple. The open() method of $modal service returns a promise on close and cancel of the modal.
Lets say
var myModal = $modal.open({
animation: true,
templateUrl: 'editForm.html',
backdrop: 'static',
keyboard: false,
scope: $scope
});
myModal.result.then(function(){
//Call function to reload the list
});
As you are calling $modal.open from list controller itself, you have got access to `promise' in list controller only and from there you can easily call your function to reload the list.