title: AngularJS: triggering a controller function when a variable changes into a directive
body: <p>I have a directive to do 2 things: (i) it manages the visualization of some tabs in HTML, (ii) it <code>$watch</code><em>es</em> the value of the object <code>myObj</code> in session storage and saves this object in a variable called <code>myData</code>. Here there is the code:</p>
  
  <pre><code>.directive('panelManager', function(){
      return {
          restrict: 'E',
          templateUrl: 'foo.html',
  
          controller: ['$scope', '$window',  function($scope, $window) {
              pn = this;
              pn.tab = 1; // init
  
              this.selectTab = function(setTab) {
                  pn.tab = setTab;
              };
  
              this.isSelected = function(checkTab) {
                  return pn.tab === checkTab;
              };
  
              $scope.$watch(function () {
                  return $window.sessionStorage.getItem('myObj');
              }, function (value) {
                  pn.myData = JSON.parse(value);
              });
          }],
          controllerAs: 'panels'
      };
  })
  </code></pre>
  
  <p>I have a controller to call a WS passing a property <code>foo</code> of the aforementioned <code>myData</code>, every time it changes. Here it is:</p>
  
  <pre><code>.controller('MyDataController', ['$http', function($http) {
  
      pdc = this;
      pdc.myResultset = [];
  
      pdc.getDetails = function(val) {
          return $http.get("myUrl"+val+"/").then(function(response){
                pdc.myResultset= response.data;
          });
      };
  }]);
  </code></pre>
  
  <p>Is there a way to trigger <code>getDetails</code> in that controller and to pass <code>val = MyData.foo</code> to it every time myData changes value? 
  In this way, I could store in <code>myResultset</code> the current resultset of the WS and assign it to local scope.</p>