title: Call jQuery function from AngularJS Controller
body: <p>I have a below button when on clicked shows a small popup like notification</p>
  
  <pre><code>&lt;button id="element" type="button" onclick="ShowNotifications()" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text inside popup"&gt;Notifications&lt;/button&gt;
  &lt;script type="text/javascript"&gt;
      function ShowNotifications() {
          $('#element').popover('open');
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>My Intention is to Show this popup every few seconds without clicking the button, but from the AngularJS Controller.</p>
  
  <pre><code> var showPop = function () {
      //how can i call that jQuery function here ??
      $timeout(showPop, 1000);
  }
  $timeout(showPop, 1000);
  </code></pre>
  
  <hr>
  
  <p>Tried with the below solution</p>
  
  <pre><code>app.directive("showNotifications", ["$interval", function ($interval) {
      return {
          restrict: "A",
          link: function(scope, elem, attrs) {          
              $interval(function () {
                  $(elem).popover("open");
                  alert('hi');
              }, 1000);
          }
      };
  }]);
  </code></pre>
  
  <p>Also included the scripts</p>
  
  <pre><code>&lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/postsService.js"&gt;&lt;/script&gt;   
  &lt;script src="js/directive.js"&gt;&lt;/script&gt;
  
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>using the directive like this</p>
  
  <pre><code>&lt;button id="element" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Friend request 1" **show-notifications**&gt;Live Notifications&lt;/button&gt;
  </code></pre>
  
  <p>I see an error "the object has no method popover"</p>