title: AngularJS a scope variable is not updated in an anonymous callback function in directive
body: <p>I've been trying to make a cubism.js graph with polled data (every second) from REST API. </p>
  
  <p>It seems like a correct value is passed to the directive, but it is not passed to an anonymous callback function. </p>
  
  <p>If I am understanding correctly, the anonymous callback function in directive should have an access to the parameter variable <code>val</code>. </p>
  
  <p>The correct value is updated in the view, and the rest of the directive. However, right now it seems like the parameter value, <code>val</code>, which was updated from the controller when the promise resolves to a callback function <code>notifyCall(data)</code>, is not being updated at an anonymous callback function of directive.</p>
  
  <p>Methods I tried:</p>
  
  <ul>
  <li>putting the <code>random</code> function inside of <code>notifyCallback</code> function in the controller.<br>
   -> didn't work</li>
  <li>wrapping <code>$scope.$apply</code> on <code>$scope.sysHeapMemoryPercent</code><br>
   -> <code>$digest error</code></li>
  <li>using scope.watch in the directive instead of <code>attrs.$observe</code><br>
   -> had a same result as <code>attrs.$observe</code> method </li>
  </ul>
  
  <p>How can I solve this problem? Do I need to use a closure?</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>'use strict';
  angular.module('adminControllers')
  .controller('pollerController', ['$scope', '$resource', 'poller', function ($scope, $resource, poller) {
  
    $scope.sysHeapMemoryPercent=0;
  
    // ......
    // Some codes that makes polling API calls every second
    // using $resource and Angular Poller
    // ......
  
    myPoller.promise.then({}, {}, notifyCallback); 
  
    function notifyCallback(data){
      $scope.sysHeapMemoryPercent = Number(data[0].value.used) / Number(data[0].value.max);
      }
  }]);
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>'use strict';
  angular.module('adminControllers')
   .directive('sysHeapMemoryDirective', function ($timeout) {
  
   return {
   restrict: 'AE',
   link: function (scope, element, attrs) {
      var context = cubism.context().serverDelay(0).clientDelay(0).step(1000).size(594);
  
  
    attrs.$observe('memory', function (newVal,oldVal) {
      console.log(oldVal); // prints undefined every second
      console.log(newVal); // prints the correct value every second
  
      var constantNum = 0.123;
      compute(constNum); // works
      compute(newVal); // Doesn't work. Some child values are returned as null
    });
  
  
    function compute(val) {
      var value = 0, values = [],
      i = 0, last; 
  
      console.log(val); // prints the correct value every second
  
      return context.metric(function (start, stop, step, callback) {
        start = +start, stop = +stop;
  
        console.log(val); // prints 0 every second
  
        if (isNaN(last)) last = start;
        while (last &lt; stop) {
          last += step;
          values.push(val);
        }
        callback(null, values = values.slice((start - stop) / step));
      }, "Demo");
    }
  }
  };
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="pollerController"&gt;
   {{sysHeapMemoryPercent}}  // successfully shows the updated value every second
     &lt;sys-heap-memory-directive memory="{{sysHeapMemoryPercent}}"&gt; &lt;/sys-heap-memory-directive&gt;
  &lt;/div&gt;
  </code></pre>