change tooltip class dynamically with angular ui tooltip

Question

I am trying to change custom class on model change for angular ui tooltip.

This is what I am trying to achieve

• if nothing is entered in text box, (when I focus) then it should show default tooltip as "required"
• if I write something (that changes model's value), so it should change the tooltip text with new customClass

With my current implementation, it changes text but customClass gets applied only when I blur and focus again on text box.

I understand when it re-render the tooltip, it picks up new value of model and apply customClass

but in this case, how can I call tooltip's recreate method to re-render it on model change?

here is the code http://plnkr.co/edit/Q4j2372DOcQkrL3Dv0bi?p=preview

Answer 1

You can always force the refresh programmatically. Add $timeout ^*) to the controller and implement a function like this :

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.emailValue = '';

  $scope.evalToolTip = function() {
    var email = document.getElementById('email');
    $timeout(function() {
        email.blur();    
        email.focus();
    })
  }   

}]);

add a ng-keydown that triggers the above evalToolTip() function :

<input ng-keydown="evalToolTip()" id="email" name="email" type="text" ng-model="emailValue" tooltip="{{ emailValue === ''? 'required': 'pattern error'}}" tooltip-trigger="focus" tooltip-placement="bottom" class="form-control" tooltip-append-to-body="true" tooltip-class="{{ emailValue === ''? '': 'customClass'}}" />

forked plnkr -> http://plnkr.co/edit/Axsw8poJDrNaWw20ilxQ?p=preview

*) without $timeout we are in risk of simultaneity errors.