title: changing a controller scope variable in a directive is not reflected in controller function
body: <p>In my directive, I have a controller variable, page which gets incremented when you press the button in the directive. However, the next line, <code>scope.alertPage()</code> which calls the controller function does not reflect this change. Notice, when you click the button page is still alerted as 1!</p>
  
  <p>I know I can fix this by adding $scope.$apply in the controller but then I get the error that says a digest is already taking place.</p>
  
  <p><a href="http://plnkr.co/edit/QSnBzM3gvJI9vnCkC19T?p=preview" rel="nofollow noreferrer">Plunker</a></p>
  
  <pre><code>app = angular.module('app', []);
  
  app.controller('myCtrl', function($scope) {
  
    $scope.page = 1;
  
    $scope.alertPage = function() {
      alert($scope.page);
    }
  
  })
  
  app.directive('incrementer', function() {
    return {
      scope: {
        page: '=',
        alertPage: '&amp;'
      },
      template: '&lt;button ng-click="incrementPage()"&gt;increment page&lt;/button&gt;',
  
      link: function(scope, elem, attrs) {
        scope.incrementPage = function() {
            scope.page += 1;
            scope.alertPage();
        }
      }
    }
  })
  </code></pre>
  
  <p>html template: </p>
  
  <pre><code>  &lt;body ng-app='app' ng-controller='myCtrl'&gt;
      page is {{page}}
  
      &lt;incrementer page='page' alert-page='alertPage()'&gt;&lt;/incrementer&gt;
    &lt;/body&gt;
  </code></pre>