title: angular how to refresh or reload directive on external event
body: <p>I am using angular 1.3</p>
  
  <p>Plunker code here  <a href="http://plnkr.co/edit/J7TSfUcNID11BZBEaBBr?p=preview" rel="nofollow">http://plnkr.co/edit/J7TSfUcNID11BZBEaBBr?p=preview</a></p>
  
  <p>In my code, I have ngRoute which defines a controller for the index page and it implements the fetch as below.</p>
  
  <pre><code>   .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 is called, load data and show the grid");
                      $scope.grid = {};
                      $scope.grid.isActive = true;
                      //how to refresh purchases directive from here
                      //it should also pass the from and to dates
                      //based on that purchases will fetch the backend data
                  }
              }
          })
  
  }]);
  </code></pre>
  
  <p>I have a directive Purchases which I am trying to reload including fetching the data through resources.  When the date changes, I want to query the data again from backend and refresh it on the grid inside the Purchases directive.</p>
  
  <p>I use ngResource plugin so fetching data from the backend is sorted out.
  When loading the page, the link function runs only once.</p>
  
  <p>What is the best way to pass the from and to dates to the directive (check the plunker index.html)?</p>
  
  <p>When the date is changed, I dont see the directive (link function) picking it up. I tried html id, name and model, but none of them worked.</p>