<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="bootstrap" />
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-2.1.3.min.js"></script>
    <script src="https://rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <div class="container">
      <h2>{{title}}</h2>
    <ul style="width: {{config.dynamicWidth}}px">
      <li ng-repeat="listItem in listItems" class="too-long" uib-tooltip="{{listItem}}" tooltip-enable="false" show-tooltip-on-text-overflow="">{{listItem}}</li>
    </ul>
    <label><input type="number" ng-model="config.dynamicWidth" /></label>
    </div>
  </body>

</html>

// Code goes here

var myApp = angular.module("myApp", ["ui.bootstrap"]);

myApp.controller("myCtrl", ["$scope", function($scope) {
  $scope.config = {
    dynamicWidth: 280
  };
  
  $scope.title = "Show tooltip only on truncated text";

  $scope.listItems = [
    "Open your eyes,",
    "Look up to the skies and see,",
    "I'm just a poor boy, I need no sympathy,",
    "Because I'm easy come, easy go,",
    "Little high, little low,",
    "Any way the wind blows doesn't really matter to me, to me."
  ]
}]);

myApp.directive("showTooltipOnTextOverflow", ["$timeout", 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);
        }
      });
      /*$timeout(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);
        }
      });*/
    }
  };
}]);
/* Styles go here */

ul {
  width: 280px;
}

.too-long {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}