title: Using bootstrap-daterangepicker in an Angular directive
body: <p>I'm having troubles using bootstrap-daterangepicker in an Angular directive. It works fine when initially loading the page, but when switching pages/states (I'm using ui-router) and going back to a page with a daterangepicker the plugin doesn't work anymore.</p>
  
  <p>It throws this error:</p>
  
  <blockquote>
    <p>TypeError: $(...).daterangepicker is not a function</p>
  </blockquote>
  
  <p>It seems like the plugin has removed itself when changing states. Anyone an idea how to fix this?</p>
  
  <pre><code>app.directive("daterangepicker", function() {
      return {
        restrict: "A",
        scope: false,
        link: function($scope, $element, $attr){
  
          $($element).daterangepicker({
            format: "DD.MM.YYYY",
            startDate: moment().subtract('days', 1),
            endDate: new Date(),          
            buttonClasses: ['btn-primary'],
          }, function(from, to) {
            $scope.date = {from: from, to: to};
            $scope.$apply(); // I need apply() here to use the two-way-databinding
          });
        }
      }
    });
  </code></pre>