title: Having trouble with ellipsis with angularjs
body: <p>I am having issue with ellipsis and angularjs. I want to update max-width dynamically from parent as TD element width. I tried for 2 approach. One is updating dom after printing the table structure. Another is to provide directive. But nothing works.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table class="table data-table cvcTable sort display"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th ng-repeat="column in tableOptions.columnDefs"
              ng-style="{'width': column.width}"&gt;&lt;a href
              ng-click="tableEvents.sort('{{column.field}}',$event)"&gt;{{column.label}}
                  &lt;i class="pull-left" ng-class="column.orderType"&gt;&lt;/i&gt;
          &lt;/a&gt;&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr ng-class-odd="'row-odd'" ng-class-even="'row-even'" ng-repeat="item in tableOptions.data"&gt;
          &lt;td&gt;{{item.key}}&lt;/td&gt;
          &lt;td&gt;&lt;span title="{{item.value}}" ellipsisSpan
              class="ellipsis"&gt;{{item.value}}&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;span title="{{item.comments}}" ellipsisSpan
              class="ellipsis"&gt;{{item.comments}}&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;{{item.updated}}&lt;/td&gt;
          &lt;td&gt;{{item.updatedBy}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Directive: I am not getting alert message.</strong></p>
  
  <pre><code>app.directive('ellipsisSpan', function () {
      return {
          restrict: 'A',
          link: function ($scope, element, attrs, ctrl) {
              alert("Im inside call");
              // Do calculation
          }
      };
  });
  </code></pre>
  
  <p><strong>Dynamic Call: I can see following line working perfectly but don't see updated in DOM.</strong></p>
  
  <p>"a.css('max-width', width + 'px');"</p>
  
  <pre><code>angular.element(document).ready(function () {
      var element = angular.element(document.querySelector('.ellipsis'));
      angular.forEach(element, function(value, key){
           var a = angular.element(value);
           var width = a.parent()[0].clientWidth;
           a.css('max-width', width + 'px');
      });
      scope.$apply();
  });
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.ellipsis {
      text-overflow: ellipsis; 
      overflow: hidden; 
      white-space: nowrap;
      max-width: inherit;
  }
  </code></pre>