[mdkess]

I'm certainly no Angular expert, so take my advice with a healthy amount of skepticism, but I think that it would be one element. The idea being that if I want to swap that stuff out for a new and improved quantity picker, I just change the directive. The idea of angular is that the HTML is supposed to make it clear what's going on, so a single element isn't a bad thing - it says, "here's the part that chooses quantities." Remember that you can nest directives too - so the meat of your page could look like:

  <div ng-controller="QuoteCtrl">
    <shirt-chooser></shirt-chooser>
    <color-picker></color-picker>
    <size-picker>
       <size-picker-choice label="SM"></size-picker-choice>
       <size-picker-choice label="MD"></size-picker-choice>
       <size-picker-choice label="LG"></size-picker-choice>
       <size-picker-choice label="XL"></size-picker-choice>
    </size-picker>
    <number-picker></number-picker>
    <order-summary></order-summary>
  </div>

And then your directive figures out what that means in terms of rendering. But now, the nice thing is that I can just substitute that with <my-size-picker> and, assuming I fulfill the contract, everything should continue to work.

Now you get the added benefit that you can test directives individually, as well as the whole controller. Right now, if you do some restructuring of the page, you could end up in a situation where you break all of your test cases. I mean, in this case it might be overkill, but as a general principle I think it's the right approach.

Anyway, looking forward to see what you do next!