angularjs - Angular UI Bootstrap Tooltip tooltip-is-open weird behaviour -

i use tooltip directive angular ui bootstrap inside 1 of own directives. want manually toggle tooltip's visibility using tooltip-is-open attribute bootstrap tooltip provides. angular ui documentation states:

tooltip-is-open <watcher icon> (default: false) - whether show tooltip. 

so assume watches on attribute's value. , want bind scope variable tooltipisopen attribute, hoping changing tooltipisopen value in directive's link function toggle tooltip visibility.

the behaviour weird.

1. if bind tooltipisopen value expression: tooltip-is-open="{{ tooltipisopen }}", tooltip doesn't appear @ all, though see dom updated (tooltip-is-open="false switches tooltip-is-open="true" , again false) in reaction mouse events.

2. if bind tooltipisopen value variable: tooltip-is-open="tooltipisopen", tooltip apears after first mouse event, doesn't react further events, staying displayed of time no way hide it.

3. the working solution found bind tooltipisopen function call :scope.tooltipisopenfun = function() { return tooltipisopen; } , tooltip-is-open="tooltipisopenfun()", or object property: tooltip-is-open="tooltip.isopen". tooltip works fine - shows , hides of time.

i suspect it's related how angularjs watchers work, difference in how javascript primitives , objects treated when assigning values. still can't understand it.

question

can explain me step step why solution 1 doesn't work , 2 works once?

directive template (for method 2)

<div uib-tooltip="tooltip message"      tooltip-is-open="tooltipisopened">    ... </div> 

directive link function

module(...).directive(..., function() {     return {         link: function(scope, elem, attr) {             /* stop further propagation of event */             function catchevent(event) {                 event.stoppropagation();             };              function showtooltip(event) {                 scope.$apply(function() {                     scope.tooltipisopened = true;                      /* hide tooltip on click outside select */                     angular.element(document).on('click', hidetooltip);                     elem.on('click', catchevent);                 });             };              function hidetooltip() {                 scope.$apply(function() {                     scope.tooltipisopened = false;                      /* remove attached handlers */                     angular.element(document).off('click', hidetooltip);                     elem.off('click', catchevent);                 });            };             scope.tooltipisopened = false;             elem.on('mouseenter', showtooltip);            elem.on('mouseleave', hidetooltip);         }); 

1st way incorrect because directive expects variable name, not variable value. correct:

<div uib-tooltip="tooltip message" tooltip-is-open="xxx"> 

or correct (you pass {{}} pass not value of variable value of variable stores variable name):

<div ng-init="yyy='xxx'">     <div uib-tooltip="tooltip message" tooltip-is-open="{{yyy}}"> 

2nd way astually works somehow: http://plnkr.co/edit/od07oj2a0tfj60q2qkhe?p=preview strange - how user supposed click outside element without triggering mouseleave event?

the thing not need this, just:

<button uib-tooltip="tooltip message" trigger="mouseenter"      tooltip-is-open="tooltipisopened">    hello </button> 

works fine.

3rd way: if see 'open' not work, 'smth.open' works means faced 'dot issue' - can not change parent scope variable child scope directly, can change variable properties. there lot of examples , explanations of issue.