Call a function after the directive is loaded angularjs
<p>I have a isolated directive, my controller looks like:</p>

<pre><code>app.controller('ZacksController', ['$scope', '$http', 'ngDialog', '$timeout', function($scope, $http, ngDialog, $timeout){
     //some code here
}]);
</code></pre>

<p>The HTML in the file looks like:</p>

<pre><code>&lt;div class="income-older-block" ng-show="selectedAge!=1"&gt;
     &lt;income-form&gt;&lt;/income-form&gt;
&lt;/div&gt;
</code></pre>

<p>I have a directive in related HTML folder, </p>

<pre><code>app.directive("incomeForm", ['$timeout', function ($timeout) {
   function link($scope) {
      var hello = function () {
        alert("1");
      }
      $timeout(hello, 0);
   }


   return {
      restrict: 'E',
      templateUrl: "app/zacks/your-income/income-form/income-form.html",
      link: link,
      controller: function ($scope, $timeout) {
                                  $scope.$watch("zacks.AgeRet.value",function(newValue,OldValue,scope){
                 if (newValue){
                     alert((newValue));
                 }
             });
      }
   }
}]);
</code></pre>

<p>I want to alert after I load the directive in the page, the alert appears at initial page itself. May I know what to do?</p>

<p>The actual problem is I'm using a rz-slider and want to initialize it once the directive is loaded to DOM., as its not taking the values provided. Is there any other approach for this problem?</p>

<pre><code>&lt;rzslider rz-slider-model="zacks.AgeRet.value" rz-slider-floor="zacks.AgeRet.floor" rz-slider-ceil="zacks.AgeRet.ceil"&gt;&lt;/rzslider&gt;
</code></pre>

<p>In case if the timeout works, I'm planning to initialize something like this:</p>

<pre><code>$timeout(function () {
    $scope.$broadcast('rzSliderForceRender');
});
</code></pre>

<p><strong>UPDATE</strong></p>

<p>Added a controller in the directive, so now I'm able to get the value when I move the slider, but still not able to initialize the value of the slider.</p>