title: AngularJS dropdown box width prevent from auto-resizing
body: <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select class = "box" ng-model="selected" ng-options="person.id as person.name for person in people" &gt;
  &lt;option value=""&gt;----select----&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.box {
      height: 21px !important;
      width: 96%;
  }
  </code></pre>
  
  <p>Hi, I'm updating the <code>$scope.people</code> and call <code>$scope.$apply(...</code> to update the dropdown. When I do this, the dropdown select box automatically increases the size and adjust the size according to my content. My content isn't even close to overflowing though. Would be great if I could get some help! In the link, <code>$scope.people</code> is statically defined since I wasn't able to demo the messaging service I'm using at the moment. I could just fix the width into a certain px size. But then when the browser window size is changed, the box size won't adjust according to that. Would be great to know if there's a way to fix this! Thanks :) <a href="http://jsfiddle.net/Lvc0u55v/7937/" rel="nofollow">http://jsfiddle.net/Lvc0u55v/7937/</a></p>
  
  <p><strong>Update</strong>
  I didn't mention this because I didn't know this would be the problem. This select box is in the table. It's within the <code>&lt;td&gt;&lt;/td&gt;</code> tag if that makes any difference..</p>