AngularJS warn user on back button

www.example.com/templates/create-template

I want to warn users if they leave create-template page. I mean whether they go to another page or to templates.

---

I use this code to warn users on a page reload and route changes should the form be dirty.

function preventPageReload() {
  var warningMessage = 'Changes you made may not be saved';
  if (ctrl.templateForm.$dirty && !confirm(warningMessage)) {
    return false
  }
}

$transitions.onStart({}, preventPageReload);
window.onbeforeunload = preventPageReload

It works as expected on a page reload and route changes if it is done by clicking on the menu or if you manually change it. However, when I click the back button, it does not fire the warning. only it does if I click the back button for the second time, reload the page, or change route manually.

I am using ui-router. When you click back button, you go from app.templates.create-template state to app.templates state.

How to warn if they press Back button?

from AngularJS warn user on back button