Execute Leaflet API after a $scope variable changed on angular

Question

I have to bind js event on a element after it have been shown by changing a $scope variable using ng-show.

After I change the scope I run JS script but the Js is fastest than angular that he miss found some div not shown yet by ng-show.

Here is a plunker for some code sample to this problem. The solution I found for this kind of problem is to do the JS code in a setTimeout but I need a clean solution : https://plnkr.co/edit/iYDs552yCyd3R7ivgD84?p=preview

$scope.start = function(){
  $scope.showMap=true;

  setTimeout(function(){  
    jsFunc();
  },1000);
}

Answer 1

Use the $timeout service:

$scope.start = function(){
  $scope.showMap=true;
  /*   
  setTimeout(function(){  
    jsFunc();
  },1000);
  */
  //Use $timeout
  $timeout(jsFunc);
}

The $timeout service is integrated with the AngularJS digest cycle.

Since the Leaflet API is external to the AngularJS framework, a $timeout is necessary for the browser to render the DOM and execute the Leaflet API code.

For more information, see AngularJS $timeout Service API Reference.