title: Sharing scope between controller & directive in AngularJS
body: <p>I've created a directive to wrap a jQuery plugin, and I pass a config object for the plugin from the controller to the directive. (works)</p>
  
  <p>In the config object is a callback that I want to call on an event. (works)</p>
  
  <p>In the callback, I want to modify a property on the controller's $scope, which <em>does not work</em>. Angular does not recognize that the property has changed for some reason, which leads me to believe that the $scope in the callback is different than the controller's $scope. My problem is I just don't why.</p>
  
  <p>Can anybody point me in the right direction?</p>
  
  <hr>
  
  <p><a href="http://jsfiddle.net/simshaun/qxjck/"><strong>Click here for Fiddle</strong></a></p>
  
  <hr>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('app', [])
      .directive('datepicker', function () {
          return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                  // Uncommenting the line below causes
                  // the "date changed!" text to appear,
                  // as I expect it would.
                  // scope.dateChanged = true;
  
                  var dateInput = angular.element('.datepicker')
  
                  dateInput.datepicker(scope.datepickerOpts);
  
                  // The datepicker fires a changeDate event
                  // when a date is chosen. I want to execute the
                  // callback defined in a controller.
                  // ---
                  // PROBLEM: 
                  // Angular does not recognize that $scope.dateChanged
                  // is changed in the callback. The view does not update.
                  dateInput.bind('changeDate', scope.onDateChange);
              }
          };
      });
  
  var myModule = angular.module('myModule', ['app'])
      .controller('MyCtrl', ['$scope', function ($scope) {
          $scope.dateChanged = false;
  
          $scope.datepickerOpts = {
              autoclose: true,
              format: 'mm-dd-yyyy'
          };
  
          $scope.onDateChange = function () {
              alert('onDateChange called!');
  
              // ------------------
              // PROBLEM AREA:
              // This doesnt cause the "date changed!" text to show.
              // ------------------
              $scope.dateChanged = true;
  
              setTimeout(function () {
                  $scope.dateChanged = false;
              }, 5000);
          };
      }]);
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
      &lt;p ng-show="dateChanged"&gt;date changed!&lt;/p&gt;
      &lt;input type="text" value="02-16-2012" class="datepicker" datepicker=""&gt;
  &lt;/div&gt;
  </code></pre>