title: Angular controller function not receiving data from directive callback function
body: <p>I am building a range slider to be used in a search panel.  I need to return the values set by the slider so it can be applied into the search model for later use.  I have a callback function in my directive and while it does call the controller function correctly, the data isn't getting passed.  Any suggestions are apprecaited</p>
  
  <p>My directive:</p>
  
  <pre><code>MyCompany.directive('rangeSlider', [ function() {
  var sliderTemplate = "&lt;div&gt;" +
    "&lt;div id='{{rangeData.slider}}'&gt;&lt;/div&gt;" +
    "&lt;input id='{{rangeData.lowerId}}' " + 
    " type='text' " + 
    " class='span1 text-center'/&gt;" +
    " &lt;div class='middle-marker'&gt;to&lt;/div&gt;" +
    "&lt;input id='{{rangeData.upperId}}' " + 
    " type='text' " + 
    " class='span1 text-center pull-right'/&gt;" +
    "&lt;/div&gt;";
  return {
    restrict: 'A',
    replace: true,
    template: sliderTemplate,
    scope: {
      saveRangeData: '&amp;'
    },
    link: function ( scope, element, attrs ) {
      scope.rangeData = [];
  
      scope.rangeData.slider = attrs.slider;
      scope.rangeData.lowerId = attrs.lowerId;
      scope.rangeData.lowerRange = attrs.lowerRange;
      scope.rangeData.upperId = attrs.upperId;
      scope.rangeData.upperRange = attrs.upperRange;
  
      scope.$watch( element, function(){
        $( "#" + scope.rangeData.slider ).slider({
        range: true,
        min: Number( scope.rangeData.lowerRange ),
        max: Number( scope.rangeData.upperRange ),
        values: [ Number( scope.rangeData.lowerRange ), Number( scope.rangeData.upperRange ) ],
        slide: function( event, ui ) {
        $( "#" + scope.rangeData.lowerId ).val( ui.values[ 0 ] );
        $( "#" + scope.rangeData.upperId ).val( ui.values[ 1 ] );
  
        scope.saveRangeData({ data: scope.rangeData });
        }
      });
  
    }
  };
  }]);
  </code></pre>
  
  <p>Here is my controller function:</p>
  
  <pre><code>$scope.saveRangeValues = function( rangeData ) {
    console.log( "saveRangeValues called " );
    console.log( rangeData );
  };
  </code></pre>
  
  <p>And the HTML where the directive is called:</p>
  
  <pre><code>    &lt;div class="cc-slider span4 pull-right kurz"
    name="val-acc-score"
    data-range-slider
    data-slider="val-acc-score-slider"
    data-lower-id="lower-val-acc-score"
    data-lower-range="0"
    data-upper-id="upper-val-acc-score"
    data-upper-range="10"
    save-range-data="saveRangeValues( rangeData )"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As I said previously, the function is getting called and the <code>console.log</code> fires off, but the rangeData object is completely empty.  And yes, I checked to make sure that rangeData does have content in the directive. </p>
  
  <p>Thanks again for your help.</p>