title: Multiple custom directives on 1 page with callbacks
body: <p>I have created a custom directive (with some help from SO). It's a full page date picker which uses ngModel to set the date when the user selects a date. At the same time it calls a callback function which is set when the directive is added to the page. The problem is that if I put 2 date pickers on the page then it always tries to call the callback from the second one.</p>
  
  <p>Here is the HTML...</p>
  
  <pre><code>&lt;fp-date-picker ng-model="dateOne" on-select="dateSelectedOne()"&gt;&lt;/fp-date-picker&gt;
  
  &lt;fp-date-picker ng-model="dateTwo" on-select="dateSelectedTwo()"&gt;&lt;/fp-date-picker&gt;
  </code></pre>
  
  <p>Here is my directive with most of it removed for brevity</p>
  
  <pre><code>angular.module('directives').directive('fpDatePicker', ['$parse', function ($parse) {
  
      return {
  
          restrict: 'EA',
          require: 'ngModel',
          templateUrl: '/templates/fpDatePicker.tpl.html',
  
          link: function($scope, $element, $attrs, ngModel){
  
              // A callback executed when a date is selected
              var onSelectCallback = $parse($attrs.onSelect);
  
  
              // Set current month
              $scope.selectedDate = moment();
  
  
  
              // Set date when one is clicked
              $scope.selectDate = function(day){
  
                  var selectedDay = day.number;
                  var selectedMonth = $scope.currentMonth.format('MM');
                  var selectedYear = $scope.currentMonth.format('YYYY');
  
                  $scope.selectedDate = moment(selectedYear + '-' + selectedMonth + '-' + selectedDay, 'YYYY-MM-DD');
  
                  // Update the model
                  ngModel.$setViewValue($scope.selectedDate);
  
  
                  // Call the on-select callback
                  onSelectCallback($scope);
  
              };
  
  
          }
  
  
      };
  
  }]);
  </code></pre>
  
  <p>And just in case it's needed, here is my directive template....</p>
  
  <pre><code>&lt;div class="fpDatePicker-controls"&gt;
      &lt;a href="#" ng-click="previousMonth()"&gt;&amp;lt;&lt;/a&gt;
      &lt;a href="#" ng-click="nextMonth()"&gt;&amp;gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="fpDatePicker-month"&gt;
      &lt;a class="fpDatePicker-day" 
          ng-repeat="day in currentMonth.days" 
          ng-click="selectDate(day)"
      &gt;
          {{day.number}}
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought that the problem of it always using the callback from the last instance of the directive on the page might be something to do with variables in the link function being global to all instances of that directive, or $attrs not being the attrs of the current instance of the directive, but I used console.log() to show the $attrs and it was different in each case.</p>
  
  <p>I also wondered if it had anything to do with making the scope isolated, but although the callback functions sit on the scope, the expression in the attributes is not part of the scope, it's an attribute being passed in.</p>
  
  <p>Very confused, any help would really be appreciated.</p>
  
  <p><strong>UPDATE: Created a Plunkr</strong></p>
  
  <p><a href="http://plnkr.co/edit/nU27Wjpu3UYCR9q6DnLw?p=preview" rel="nofollow">http://plnkr.co/edit/nU27Wjpu3UYCR9q6DnLw?p=preview</a></p>