title: ddCollapse not working for more than one elements
body: <p>I am using <a href="https://gist.github.com/doukasd/0744566c5494ebc8643f" rel="nofollow">this directive</a> to know and hide large text. But the problem is if we have more than one element in a ng-repeat and this directive is applied. When i click on more link all the elements with this directive gets expanded. HOw can i make only single div to collapse and hide.??</p>
  
  <p>I tried debug the directive and found out that there is only a single scope variable named collapse and when this variable toggles the variable value is applied across all the elements with this directive. HOw can i solve this issue??</p>
  
  <pre><code>// a directive to auto-collapse long text
  angular.module('myapp')
      .directive('ddCollapseText', ['$compile', function($compile) {
          return {
              restrict: 'A',
              replace: true,
              link: function(scope, element, attrs) {
                  console.log(element);
                  // start collapsed
                  scope.collapsed = false;
  
                  // create the function to toggle the collapse
                  scope.toggle = function() {
                      scope.collapsed = !scope.collapsed;
                  };
  
                  // get the value of the dd-collapse-text attribute
                  attrs.$observe('ddCollapseText', function(maxLength) {
                      // get the contents of the element
                      var text = element.text();
  
                      if (text.length &gt; maxLength) {
                          // split the text in two parts, the first always showing
                          var firstPart = String(text).substring(0, maxLength);
                          var secondPart = String(text).substring(maxLength, text.length);
  
                          // create some new html elements to hold the separate info
                          var firstSpan = $compile('&lt;span&gt;' + firstPart + '&lt;/span&gt;')(scope);
                          var secondSpan = $compile('&lt;span ng-if="collapsed"&gt;' + secondPart + '&lt;/span&gt;')(scope);
                          var moreIndicatorSpan = $compile('&lt;span ng-if="!collapsed"&gt; ...&lt;/span&gt;')(scope);
                          var toggleButton = $compile('&lt;a href="javascript:void(0)" class="collapse-text-toggle" ng-click="toggle()"&gt;&lt;i ng-if="!collapsed" class="fa fa-level-down"&gt;&lt;/i&gt; &lt;i ng-if="collapsed" class="fa fa-level-up"&gt;&lt;/i&gt; {{collapsed ? "less" : "more"}}&lt;/a&gt;')(scope);
  
                          // remove the current contents of the element
                          // and add the new ones we created
                          element.empty();
                          element.append(firstSpan);
                          element.append(secondSpan);
                          element.append(moreIndicatorSpan);
                          element.append(toggleButton);
                      }
                  });
              }
          };
      }]);
  </code></pre>