I am using the bootstrap ui with angular and trying to do a simple two way data binding with the tooltip element. Essentially the user should be able to interact with the tool tip. I have found several relevant questions on stackoverflow but haven't found a good answer yet. This is what I have:
http://plnkr.co/edit/12BdBFGdJtAh4kpHYmC3?p=catalogue
Basically I would like to execute the same function if the user clicks that button inside the tooltip. As you can see if you click on the button when the same code is outside, it works. But when it is placed inside the tooltip, angular does not recognize it. What is the best way of dealing with this?
Update: is there a general way of binding with tooltip objects. For example if I wanted to use this tooltip plugin, how would I do that?
http://plnkr.co/edit/EXGJbDVyBHu0JgBtS4LZ
More Details: The qtip2 plugin creates a qtip element in the DOM which is then displayed over the text. I can get it to bind with the following lines:
var elem = document.getElementById('qtip-0-content');
scope.myVar = $compile(elem)(scope);
In the above code 'qtip-0-content' is the id assigned to the wrapper div that the plug in creates. However I think getElementById does not seem like the right way of binding this. I just want angular to notice the change in the DOM caused by the plugin and pick up an angular specific tags. Furthermore, this function can only be called WHEN the tooltip is visible because that is when the DOM changes. So it does not work the first time, but works for any subsequent calls.