title: Angular - detect when a controller is `unloaded`
body: <p>I'm new be in angular. I want to know before <code>viewDashboard</code> controller will unload and I'm not sure how I can detect that.</p>
  
  <p>Basicali after click an item from left menu <code>Template.fn_change_view()</code> changing <code>Template.active_view</code> to active view name e.g. 'dashboard' and it show/hide some <code>view-</code> element directives. </p>
  
  <p>But after that code written inside inactive directive controller not execute any more. Before that happen I need to execute one function from this inactive controller. Is there any way to do that?</p>
  
  <p>I hope I write that clear enough, if not I will try to explain better.</p>
  
  <p><strong>HTML:</strong></p>
  
  <p>index.html</p>
  
  <pre><code> &lt;body class="template" ng-controller="TemplateController as Template" ng-class="{'on': Template.loged_in}"&gt;
      &lt;div class="mainFlexCont"&gt;            
          &lt;left-menu class="menuFlexCont menu" ng-class="{'open': Menu.isMenuOpen}"&gt;&lt;/left-menu&gt;
          &lt;!-- dashboard is visible only when  Template.active_view is equal to 'dashboard' --&gt;            
          &lt;view-dashboard class="contentFlexCont" ng-if="Template.fn_active_view('dashboard')"&gt;&lt;/view-dashboard&gt;            
          &lt;!-- ... --&gt;
      &lt;/div&gt;    
      &lt;!-- ... --&gt;
  &lt;/body&gt;                                
  </code></pre>
  
  <p>left-menu.html loaded by leftMenu directive</p>
  
  <pre><code>&lt;ul class="leftMenu"&gt;
      &lt;li&gt;
          &lt;a class="toggleLeft" ng-click="Menu.isMenuOpen = !Menu.isMenuOpen" href&gt;
              &lt;i class="fa fa-bars"&gt;&lt;/i&gt; Toggle Menu
          &lt;/a&gt;
      &lt;/li&gt;   
      &lt;!-- view change by clicking one of list items --&gt;
      &lt;li ng-repeat="item in Menu.obj_items" ng-click="Template.fn_change_view(item.active)" ng-class="{'active' : Template.fn_active_view(item.active)}"&gt;
          &lt;a href&gt;
              &lt;i class="fa {{item.icon}}"&gt;&lt;/i&gt; {{item.label}}
          &lt;/a&gt;
      &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>dashboard.html - loaded by viewDashboard directive</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
          &lt;h1&gt;Dashboard&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-7"&gt;
          &lt;chart-yearly class="chart"&gt;&lt;/chart-yearly&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <p>chartYearly directive</p>
  
  <pre><code>app.directive('chartYearly', function () {
      return{
          restrict: 'E',
          templateUrl: 'views/chart-yearly.html',
          controller: function ($scope) {
              // how I can detect here before Yearly controler will be unloaded?
              // when Template.active_view will change to different than dashboard
                  $scope.$watch('Template.active_view', function () {
                      // I need to execute this when this directive is active either before is unloaded 
                      console.log(2);
                  });
          },
          controllerAs: 'Yearly'
      };
  </code></pre>