changing a controller scope variable in a directive is not reflected in controller function

Question

In my directive, I have a controller variable, page which gets incremented when you press the button in the directive. However, the next line, scope.alertPage()

Answer 1

The problem is that the timeline is off.

1. button clicked, incrementPage()
2. directive scope value incremented (now 2)
3. alertPage() parent scope value read (still 1)
4. parent scope updated as part of digest (now 2)

To get around this, you need to either call the alert function after the digest cycle (e.g. $timeout) or you need to watch for changes in the parent scope.

// in controller
$scope.$watch('page', function (currentValue, previousValue) {
  // initially triggered with same value
  if (currentValue > previousValue) {
    alert(currentValue)
  }
})

Then change the value naturally.

// in directive html