title: Angularjs show more ellipsis text with ng-click
body: <p>I am trying to show ellipsis for div content with '...more' text. I am also trying to use ng-click to show full text on clicking '....more'. </p>
  
  <p>What I am trying is to add a hover class on click but having issues connecting click event to show more text.</p>
  
  <p><a href="http://jsfiddle.net/HB7LU/23674/" rel="nofollow">my fiddle is here</a></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl" id= 'divEllipseContainer' class="{{class}}" ng-click ="showEllipseContent()"&gt;
    Chandra is in office with his beautiful wife with sour cream on her face.
  &lt;/div&gt;
  
  var myApp = angular.module('myApp',[]);
  function MyCtrl($scope) {
      $scope.class = "appEllipseContent";
  
      $scope.showEllipseContent = function(){
          if ($scope.class == "appEllipseContent")
              $scope.class = "";
           else
              $scope.class = "appEllipseContent";
      };
  }
  
  .appEllipseContent {
      overflow: hidden;
      white-space: nowrap;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      width:200px;
  }
  
      .appEllipseContent:hover {
          overflow: visible;
          white-space: normal;
      }
  </code></pre>