title: "perfect-scrollbar" (jQuery plugin) isn't initialised properly when a its container is being filled with Angular.js
body: <p>On my page I programmatically generate a food/drinks menus from a json file with Angular.js. The problem is with the "<a href="https://github.com/noraesae/perfect-scrollbar" rel="nofollow">perfect-scrollbar</a>" used for scrolling the angular-generated content, which appears to require a scroll-wheel event to initialise on these menus. This makes it impossible to scroll on devices without a scroll-wheel. Apart from the angular-generated content other pages initialize perfect-scrollbar properly. This gave me a clue that the problem might lie with the interaction between jQuery world (perfect-scrollbar is a jQuery plugin) and Angular world.<br>
  The site is <a href="http://themockingbird.co.uk" rel="nofollow">themockingbird.co.uk</a> - navigate to the "Food" and "Drinks" to see the problem in action - can't scroll the content (the perfect-scrollbar won't appear) unless with the mouse scroll-wheel.<br>
  I've written this little directive:<br></p>
  
  <pre><code>mainMenuApp.directive('scrollBar', function(){
      return {
          restrict: 'C',
          template: '&lt;div ng-transclude&gt;&lt;/div&gt;',
          transclude: true,
          scope: {},
          link: function(scope, element, attrs){
              $(element).perfectScrollbar();
              //element.perfectScrollbar(); - doesn't work
              //angular.element(element).perfectScrollbar(); - doesn't work
          }
      }
  });
  </code></pre>
  
  <p>to facilitate the "perfect-scrollbar" via angular for the two menus, but this did not solve the problem.<br>
  How can I make the perfect-scrollbar work perfectly with angular (pun intended :)?<br>
  I appreciate your time.<br>
  cheers<br>
  Jared</p>