title: Angular js directive scope value binding with controller undefined
body: <p>I've created a simple directive that displays a chart.</p>
  
  <p>I have an angular directive with an $http request. I have to store the response into my $scope and access this $scope value to my link directive scope to display the chart.</p>
  
  <p>I'm trying to implement a gauge chart using am chart angular chart</p>
  
  <p>Here is my code :</p>
  
  <pre><code>app.directive('gauge',function(){
      return {
          restrict: 'AEC',
          replace:true,
          template: '&lt;div id="speeda_meter"&gt;&lt;/div&gt;',
          scope: {ranges:'='},
          controller: function ($scope, $http,apiurl) {
              $scope.type = 'percentage';
              function getUsage(type){ 
                  $http({
                      method: 'POST',
                      url: apiurl + '/getUsage',
                      data: {'type': $scope.type}
                  }).success(function (data, status) {
                      if (data.status == true) {
                          $scope.ranges = data.result.ranges;
                          $scope.interval = data.result.interval;
                      }    
                  });
              }      
              getUsage($scope.type);
  
          },
          link: function (scope, element, attrs,ctrl) {   
              var chart = false;              
        //        ngModelCtrl.$formatters.push(function(modelValue) {
        //            return modelValue;
              // });
  
              // ngModelCtrl.$render = function () {
  
                  //scope.ranges = ngModelCtrl.$viewValue;
                  console.log(ctrl.ranges);
                  var initChart = function() {
                      if (chart) chart.destroy();
                      var config = scope.config || {};
                      chart = AmCharts.makeChart( "speeda_meter", {
                              "type": "gauge",
                              "axes": [ {
                                  "axisThickness": 0,
                                  "axisAlpha": 0.2,
                                  "tickAlpha": 0.2,
                                  "valueInterval": 425,   
                                  "inside": false,
                                  "fontSize": 11,
                                  "gridInside": true,
                                  "startAngle": -90,
                                  "endAngle": 90,
                                  "bands": scope.ranges,
                                  "topText": "497",
                                  "topTextYOffset": 105,
                                  "topTextColor": "#555555",
                                  "topTextFontSize": 50,  
                                  "bottomText": "Watts",
                                  "bottomTextYOffset": -10,
                                  "bottomTextColor": "#909090",
                                  "bottomTextFontSize": 18,
                                  "endValue": 1700
                              }],
                              "arrows": [{
                                "startWidth" : 15,
                                "nailBorderThickness" : 1,
                                "nailRadius" : 8 ,
                                "color" : "#5b5b5b",
                              }],
                              "export": {"enabled": true}
                      });         
                  };
                  initChart();       
             // }             
          }          
      }
  });
  
  &lt;gauge ranges="ranges" interval="interval"&gt;&lt;/gauge&gt;
  </code></pre>
  
  <p>I'm trying to ranges and interval from the response to assign in the link scope, but it's undefined. What is wrong with that?</p>
  
  <p>Any solution?</p>