Detect unsaved changes and alert user using angularjs

Question

Below is the code so far

Answer 1

To use Anders Ekdahl's excellent answer with an Angular 1.5 component, inject the $scope in the component's controller:

angular
  .module('myModule')
  .component('myComponent', {
    controller: ['$routeParams', '$scope',
      function MyController($routeParams, $scope) {
        var self = this;

        $scope.$on('$locationChangeStart', function (event, next, current) {
          if (self.productEdit.$dirty && !confirm('There are unsaved changes. Would you like to close the form?')) {
            event.preventDefault();
          }
        });
      }
    ]
  });