title: angular set different id on different lists
body: <p>I'm trying to have scrollables ul list inside fixed width div elements. 
  Let's say the div outer div is 300px width while each div containing the ul list in the page can have a different width varying on the number of li elements composing it.</p>
  
  <p>I build these div with ul scrollable lists inside an angular directive. And in the same directive I would like to set the width of these single div containing the UL elements.</p>
  
  <p>This is the code I have until now... </p>
  
  <pre><code>mainApp.directive('mimiInfoline', function(){
  
    function link(scope, element, attrs, $index) {
      // let's count how many elements in the list we got. Luckily Angular give us the scope in the directive
      var numOfSingleLineElm = 0;
      for(var singleLineElement in scope.csi) {
        numOfSingleLineElm++;
      }
      var tempSecWidth = 200 * numOfSingleLineElm;
      element.find('#my-list').css('width',tempSecWidth + "px");
      element.attr('id','myelmnum' + scope.index);
      var requestElement = '#' + element.attr('id');
      new IScroll(requestElement, { scrollX: true, scrollY: false, mouseWheel: true });
    }
    return {
      restrict: 'A',
      replace: true,
      scope: {
        index: '=',
        csi: '='
      },
      templateUrl: 'views/mimi-custom-list.html',
      link: link
    };
  });
  </code></pre>
  
  <p>and this is the single html</p>
  
  <pre><code>&lt;div class="log-widget-list"&gt;
    &lt;div id="my-list"&gt;
      &lt;ul class="list clearfix"&gt;
        &lt;li class="pull-left" ng-repeat="linfo in csi.linesInfo | orderBy: 'linfo.specDesc'"&gt;
          &lt;h4 class="align-center"&gt;{{linfo.shortCode}}&lt;/h4&gt;
          &lt;div class="clearfix"&gt;
            &lt;span class="icon-clock pull-left"&gt;&lt;/span&gt;
            &lt;span class="pull-right"&gt; {{linfo.specDesc}}min&lt;/span&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I have is that I get exactly the number of elements I need with exactly the number of list elements needed inside each of those UL elements.
  But if the first UL element has 2 li elements I would expect 400 px width fr the div surrounding the the UL(#my-list), while if the second UL element has 7 li elements I would expect 1400px width for the the relative div(#my-list).
  Instead, at the end of the construction of the directive I have both div #my-list that are 1400px width, as if the css attribute of the first div element (#my-list) is overwritten by the second div element.</p>
  
  <p>Is there a way to correct this behavior?</p>
  
  <p>EDIT:</p>
  
  <p>this is the modification if I want to try to make a unique identifier to the div surrounding the ul:</p>
  
  <pre><code>element.find('#my-list').addClass('linenum' + scope.index).css('width',tempSecWidth + "px");
  </code></pre>
  
  <p>I still get the same behavior..</p>