title: AngularJS ng-mouseover & compiling templates
body: <p>I'm trying to implement qTip with angular. I have a ng-repeat and want to display a qTip on mouseover of a specific HTML element for every item in my collection:</p>
  
  <pre><code> &lt;div id="{{feedItem.id}}" class="cxfeeditem feeditem cxhover" ng-repeat="feedItem in items"&gt;
     ...
     ..
     &lt;a ng-mouseover="onNameMouseOver(feedItem.actor,$event)"&gt;{{feedItem.actor.name}}&lt;/a&gt;
  
   &lt;/div&gt;
  </code></pre>
  
  <p>Controller code:</p>
  
  <pre><code>$scope.onNameMouseOver = function(actor,event){
    var content=$templateCache.get('bubble.html');
    var compiledContent = $compile(content)(actor);
    $(event.target).qtip({
      show: 'mouseover',
      hide: 'mouseout',
      content: compiledContent,
      position:{
          at: 'right center'
      },
      style: {
          tip: {
              corner: 'left top'
          }
      }
    });
  
  };
  </code></pre>
  
  <p>I want others to be able to change the template of the qTip bubble pop. So I have the template in index.html:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="chatter-bubble.html"&gt;
      &lt;div class="..."&gt;
          &lt;div class="hoverInfo"&gt;
          &lt;div class="nameAndInfo withPresence"&gt;
                      &lt;a href="#" class="name"&gt;{{actor.name}}&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>In trying the above code I get the below error:</p>
  
  <pre><code>TypeError: Object #&lt;Object&gt; has no method '$watch'
  </code></pre>
  
  <p>I tried the directive route and got it to work. But instead of being invoked only on "mouseover" my directive code seems to get executed for all directive references when I only need to execute when the mouseover event actually happens. Directive code is below:</p>
  
  <pre><code>&lt;span bubble="feedItem.actor"...&gt;
  
  &lt;/span&gt;
  
  
  myApp.directive('bubble', function($http, $compile, $templateCache){
      return {
          restrict: 'A',
          scope:{
              actor:"=chatterBubble"
          },
          link: function(scope, element, attrs)
          {
                var content=$templateCache.get('.html');
                scope.sessionToken=getSessionToken();
                var compiledContent = $compile(content)(scope);
                $(element).qtip({
                  show: 'mouseover',
                  hide: 'mouseout',
                      content: compiledContent,
                  position:{
                      at: 'right center'
                  },
                  style: {
                      tip: {
                          corner: 'left top'
                      }
                  }
                });
  
          }
      }
  });
  </code></pre>
  
  <p>Any ideas on what i'm missing here?</p>