AngularJs app not show uib tooltip - angularjs

Question

I am trying to implement in angular js that when in li ellipsis come display tooltip for that my code is below
Dependency Injection:
angular.module('spt', ['ui.router', 'ngStorage', 'ngAnimate', 'ui.bootstrap', 'ui.slimscroll', 'angular-google-analytics', 'jmdobry.angular-cache',
'stpa.morris', 'angularReverseGeocode', 'chart.js', 'ui.calendar', 'ui.date',
'me-lazyload', 'angularUtils.directives.dirPagination', 'angular-loading-bar', 'base64',
'nemLogging', 'ui-leaflet', 'angular-google-adsense', 'dropstore-ng', 'ngVideo', 'angular-google-adsense', 'cgBusy', 'duScroll', 'angularGrid', 'infinite-scroll'
]);
In HTML:
<p class="contactEmail">
<ul style="max-width: 200px;">
<li uib-tooltip="{{email}}" tooltip-enable="flag" show-tooltip-on-text-overflow="flag" style="overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;">
<i class="ion-email"></i>
Email : {{email}}
</li>
</ul>
</p>
JS:
angular.module('spt').directive('showTooltipOnTextOverflow',
function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var el = element[0];
scope.$watch(function(){
return el.scrollWidth;
}, function() {
var el = element[0];
if (el.offsetWidth < el.scrollWidth) {
//console.log('ellipsis is active for element', element);
attrs.tooltipEnable = "true";
} else {
//console.log('ellipsis is NOT active for element', element);
}
});
}
};
});
Controller:
function ContactController(
$scope,
$rootScope,
$modal,
$log,
$sce,
ContactService,
Utility,
SettingsService,
Session,
APPLICATION,
RESPONSE,
CONSTANTS) {
$log.debug('in ContactController');
//function Declaration
$scope.closeModelInstance = closeModelInstance;
$scope.showDropdown = showDropdown;
$scope.selectItem = selectItem;
$scope.showBlock = false;
$scope.showBlockMessage = false;
$scope.blockMessage = '';
$scope.syncContacts = syncContacts;
$scope.flag = true;
$scope.email = "sdajkdsjsadklsdajkasldjsdakljsadklsdadsa#adsjsdsadkjadsjk.it";
if (Utility.redirectToDashboard(Session.getValue(APPLICATION.currentDeviceId)) === true) {
return true;
}
$rootScope.isChildSelected1 = Session.getValue('isChild');
var params = {};
params.id = Session.getValue(APPLICATION.currentDeviceId);
$log.debug('contacts');
$scope.items = {};
$scope.blockType = {
message: false,
Contacts: false
};

Answer 1

You can't use a static attribute to do that!
Use a variable from your scope e.g.
$scope.myVar = false;
HTML
<p class="contactEmail">
<ul>
<li uib-tooltip="{{item.email}}"
tooltip-enable="myVar"
show-tooltip-on-text-overflow="myVar">
<i class="ion-email"></i> Email : {{item.email}}
</li>
</ul>
</p>
JS
angular.module('spt').directive('showTooltipOnTextOverflow', function () {
return {
restrict: 'A',
scope: {
showTooltipOnTextOverflow: "="
},
link: function(scope, element, attrs) {
var el = element[0];
scope.$watch(function(){
return el.scrollWidth;
}, function() {
var el = element[0];
if (el.offsetWidth < el.scrollWidth) {
scope.showTooltipOnTextOverflow = true;
}
else {
scope.showTooltipOnTextOverflow = false;
}
});
}
};
});
Working fiddle ==> http://plnkr.co/edit/EGHPncgOVvubU9iBlJdx?p=preview