daterangepicker not working inside ng-if

Question

I'm using daterangepicker in a form field to display a date-picker. As you can see this works fine in the field at the bottom but it doesn't in the field that is contained within the ng-if.

http://plnkr.co/edit/WogKyUDNAVAXQTm3lOJR?p=preview

It's not daterangepicker specific, this is true for any jQuery functions inside an ng-if.

One of the solutions involves using ng-show but it needs to be ng-if in this case.

Answer 1

Found the solution:

1. Wrap the jQuery function inside a $scope function.

2. Call the $scope function with ng-init.

   $scope.initializeDatepicker = function(){ $('.datepicker').daterangepicker(); };

   ng-init="initializeDatepicker()";