title: Refresh the data in controller when scope gets changed in AngularJS
body: <p>I'm pretty new with angular and I've read a lot of threads here and googled this topic but I cannot get a clear answer. what i am really trying to achieve is. lets suppose I have a controller A, this is a actual source for data. I passed it to one directive through binding it to a HTML. From this directive I am acually getting the source at another controller.
  So I need to find out the way where I can change the data of controller when the data of controller A gets changed.</p>
  
  <p><strong>Controller A</strong></p>
  
  <pre><code>angular.module('page.leadAndOpportunity.ctrl', []).controller('LeadAndOpportunityController', ['$scope', '$rootScope', '$timeout', function ($scope, $rootScope, $timeout, leadAndOpportunityService) {
  
      $scope.selectDataSource = function (condition) {
          var dataSource = [];
          var dataSource = $scope.leadsDataSource.filter(function (item) {
              return item.typeName === condition;
          });
          $scope.leadsDataSource = [];
          $scope.leadsDataSource = dataSource;
          console.log($scope.leadsDataSource);
      }
  
  }]);
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ng-senab-grid datasource="{{ leadsDataSource }}" defaultdata="{{defaultColumns}}" skipdata="{{ skipColumns }}" enablepersonalisation="true"&gt;&lt;/ng-senab-grid&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>angular.module('page.gridView.drct', []).directive("ngSenabGrid", ["$rootScope", function ($rootScope) {
          return {
              restrict: "E",
              templateUrl: "pages/gridView/page.gridView.tpl.html",
              scope: {
                  enablePersonalisation: "@enablepersonalisation",
                  datasource: "@datasource",
                  defaultdata: "@defaultdata",
                  skipdata: "@skipdata"
              },
          }
      }]
  );
  </code></pre>
  
  <p><strong>Controller B</strong></p>
  
  <pre><code> var _datasource = JSON.parse($scope.datasource);
  //rest the data follows
  </code></pre>
  
  <p>So when <code>$scope.leadsDataSource</code> gets changes on <strong>Controller A</strong>, then the</p>
  
  <pre><code>var _datasource = JSON.parse($scope.datasource);
  </code></pre>
  
  <p>also should get changed</p>
  
  <p>I dont know if it is possible or not. But I need to change the data
  Thanks in advance</p>