I\'m trying to understand the difference between the controller\'s $onDestroy method and $scope.$destroy().
Definition says that $
Take a look at the following links:
https://github.com/angular/angular.js/issues/15073
https://github.com/angular/angular.js/issues/14376
To summarize, the explanation they give is the following:
There is a misconception that controller.$onDestroy() is equivalent to $scope.$on('$destroy'), where $scope is the scope passed to the controller. This is not always the case.
More specifically, controller.$onDestroy() is called when the scope where the controller "lives in" gets destroyed. When you have an isolate scope directive, the scope passed (as $scope) to the controller is not the scope that the controller lives in, it is a child-scope that is created for the directive's template. Thus, calling $scope.$destroy() will NOT destroy the scope that the controller lives in (and NOT call controller.$onDestroy()).
The only case, where controller.$onDestroy() is equivalent to $scope.$on('$destroy') is when having a directive with scope: false. This means that no new scope is created, so the scope passed (as $scope) to the controller is the same scope that the controller lives in.
This explains the second situation, but I still don't get why you can call the function associated with the 'Component FUNC' button even after you have called $destroy().
I hope this helps.