angularjs - angular how to refresh or reload directive on external event -

i using angular 1.3

plunker code here http://plnkr.co/edit/j7tsfucnid11bzbeabbr?p=preview

in code, have ngroute defines controller index page , implements fetch below.

   .config(['$stateprovider', '$urlrouterprovider', function($stateprovider, $urlrouterprovider) {      $urlrouterprovider.otherwise('/');      $stateprovider         .state('home', {             url: '/',             templateurl: '/assets/app/html/home.partial.html',             controller: function($scope) {                 $scope.fetch = function(purchase) {                     console.log("fetch called, load data , show grid");                     $scope.grid = {};                     $scope.grid.isactive = true;                     //how refresh purchases directive here                     //it should pass , dates                     //based on purchases fetch backend data                 }             }         })  }]); 

i have directive purchases trying reload including fetching data through resources. when date changes, want query data again backend , refresh on grid inside purchases directive.

i use ngresource plugin fetching data backend sorted out. when loading page, link function runs once.

what best way pass , dates directive (check plunker index.html)?

when date changed, dont see directive (link function) picking up. tried html id, name , model, none of them worked.

i'm assuming you're fetching data , giving director render based on it. keeping in mind there 1 easy way "refresh" directive , use ng-if. if expression inside ng-if false directive destroyed, if it's true instantiated newly. if instantiated newly based on new data show new data well. 1 way refresh directive.

ideally grid should seamlessly change based on if data changes angularjs has 2 way binding. if code not created in manner can refresh directive using ng-if.