Untitled

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

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="FooController as foo">
      
      <ul>
        <li ng-repeat="item in foo.list">
          <div my-tooltip="item.descr" some-value="foo.bar">{{item.descr}}</div> -
          <input type="text" ng-model="item.descr">    
        </li>
      </ul>
    </div>
  </body>

</html>

// Code goes here

(function(angular){
  "use strict";
  angular.module('myApp', [])
    .controller('FooController', function(){
      this.bar = '';
      this.list = [
          { descr: 'abc' },
          { descr: 'efg' },
          { descr: 'some really long description' },
          { descr: 'another really long description' },
          { descr: 'xyz' }
        ];
    })
    .directive('myTooltip', function($compile) {
      return {
        scope: {
          myTooltip: '='
        },
        template: '{{myTooltip}}',
        link: function (scope, element, attrs) {
          scope.hasMoreText = false;
          scope.showAllText = false;

          scope.moreText = function(){
            if(scope.hasMoreText) {
              scope.showAllText = true;
            }
          }

          scope.$watch('myTooltip', function(newValue, oldValue){
            
            var html;
            
            scope.showAllText = false;
            if((scope.myTooltip || "").length > 5) {
              scope.hasMoreText = true;
              scope.firstPart = scope.myTooltip.substring(0, 5) + "...";
            }
            else
            {
              scope.hasMoreText = false;
              scope.firstPart = scope.myTooltip;
            }
            
            if(scope.hasMoreText) {
              html = '<div>{{firstPart}} <a href="#" ng-show="!showAllText" ng-click="moreText()">More</a> {{showAllText ? myTooltip : ""}}</div>';
            } 
            else
            {
              html = '<div>{{myTooltip}}</div>'
            }
            
            element.html(html);
            $compile(element.contents())(scope);
          });
          
        }
      }
    });
  
})(angular);

/* Styles go here */