title: AngularJS Directive failing apply because $apply is already running
body: <pre><code>Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.7/$rootScope/inprog?p0=%apply
  </code></pre>
  
  <p>Hi! I'm making a mini calendar standalone directive and I'm having trouble applying the changes of the months and the day. It tells me $apply is already in progress, I have google around and notice it's a problem when using it inside a compile definition object. </p>
  
  <p>But preventing the $apply from running when it's already doing it didn't solve things, since it seems like its always running. Any suggestion or fixes for my issue would be appreciated :D</p>
  
  <p>Controller + Directive</p>
  
  <pre><code>function calendarController($scope) {
      $scope.config = new Date(2013, 4, 25);
  }
  angular.module("calendar", []).directive('miniCalendar', function($parse) {
      return {
          restrict: "E",
          replace: true,
          templateUrl: "../views/template.html",
          transclude: true,
          controller: function($scope) {
              $scope.currentDate = new Date();
              $scope.prev = function() {
                  $scope.mCalDate = new Date($scope.mCalDate.getFullYear(), $scope.mCalDate.getMonth() - 1, $scope.mCalDate.getDay());
                  $scope.updateDate($scope.mCalDate);
              };
              $scope.next = function() {
                  $scope.mCalDate = new Date($scope.mCalDate.getFullYear(), $scope.mCalDate.getMonth() + 1, $scope.mCalDate.getDay());
                  $scope.updateDate($scope.mCalDate);
              };
              $scope.selecting = false;
              $scope.selectDate = function() {
                  $scope.selecting = !$scope.selecting;
              };
              $scope.selectDay = function(day) {
                  $scope.mCalDate = day.date;
                  $scope.updateDate($scope.mCalDate);
              };
              $scope.currentMonth = '';
              $scope.currentYear = '';
              $scope.days = [{
                  day: "Sun"
              }, {
                  day: "Mon"
              }, {
                  day: "Tue"
              }, {
                  day: "Wed"
              }, {
                  day: "Thu"
              }, {
                  day: "Fri"
              }, {
                  day: "Sat"
              }];
              $scope.weeks = [];
          },
          scope: {
              mCalDate: '='
          },
          compile: function(element, attrs) {
              var modelAccessor = $parse(attrs.mCalDate);
              return function(scope, element, attrs, controller) {
                  scope.currentDate = scope.mCalDate.getDate() + '/' + Math.abs(scope.mCalDate.getMonth() + 1) + '/' + scope.mCalDate.getFullYear();
                  var firstDayOfMonth = new Date(scope.mCalDate.getFullYear(), scope.mCalDate.getMonth(), 1).toDateString().split(' ');
                  var totalDays = new Date(scope.mCalDate.getFullYear(), scope.mCalDate.getMonth() + 1, 0).getDate();
                  var firstDayIndex;
                  for (var i in scope.days) {
                      if (scope.days[i].day == firstDayOfMonth[0]) {
                          firstDayIndex = i;
                      }
                  }
                  var allDays = [];
                  var h = 0;
                  for (i = 0; i &lt; totalDays + 6; i++) {
                      if (i &gt;= firstDayIndex &amp;&amp; (h + 1) &lt;= totalDays) {
                          allDays.push({
                              dayName: scope.days[new Date(scope.mCalDate.getFullYear(), scope.mCalDate.getMonth(), h + 1).getDay()].day,
                              day: ++h,
                              date: new Date(scope.mCalDate.getFullYear(), scope.mCalDate.getMonth(), h + 1)
                          });
                      } else {
                          allDays.push({});
                      }
                  }
                  var calendar = []
                  var chunk = 7;
                  for (i = 0, allDays.length; i &lt; allDays.length; i += chunk) {
                      calendar.push({
                          week: calendar.length,
                          days: allDays.slice(i, i + chunk)
                      });
                  }
                  scope.weeks = calendar;
                  scope.currentYear = scope.mCalDate.getFullYear();
                  scope.currentMonth = scope.mCalDate.toDateString().split(' ')[1];
                  scope.$watch('mCalDate', function(val) {
                      //debugger;
                  });
                  scope.updateDate = function(date) {
                      scope.mCalDate = date;
                      var phase = scope.$root.$$phase; //Safe applying
                      if (phase != '$apply' || phase != '$digest') {
                          scope.$apply(function() {
                              scope.mCalDate = date;
                              $parse(attrs.mCalDate).assign(scope.$parent, 'config');
                          });
                      }
                  };
  
              };
  
          }
      };
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;mini-calendar type="text" m-cal-date="config" /&gt;
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>&lt;div class="miniCalendar"&gt;&lt;label ng-click="selectDate()"&gt;&lt;input type="text" ng-model="currentDate" disabled&gt;&lt;/label&gt;&lt;div ng-show="selecting"&gt;&lt;div&gt;&lt;a&gt;&lt;span ng-click="prev()"&gt;Prev&lt;/span&gt;&lt;/a&gt;&lt;a&gt;&lt;span ng-click="next()"&gt;Next&lt;/span&gt;&lt;/a&gt;&lt;div &gt;&lt;span ng-bind="currentMonth"&gt;January&lt;/span&gt;&amp;nbsp;&lt;span ng-bind="currentYear"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;table&gt;&lt;thead&gt;&lt;tr&gt;&lt;th ng-repeat="day in days"&gt;&lt;span ng-bind="day.day"&gt;&lt;/span&gt;&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr ng-repeat="week in weeks"&gt;&lt;td ng-repeat="d in week.days"&gt;&lt;a ng-bind="d.day" ng-click="selectDay(d)"&gt;1&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>