Angular-filter by select value
<p>I have an application where I want to filter a long list of products based on value from "select" containing product types. The filter works, but only after I select something. It initially sets the "Show All" option, but filters out everything. If I select something else, it works, and if I re-select "Show All" it works. But why doesn't the filter work initially?</p>

<p>The model (looks something like this):</p>

<pre><code>$scope.products = {[
    {name: 'productA',Type: 1},
    {name: 'productB',Type: 1},
    {name: 'productC',Type: 2},
    {name: 'productD',Type: 2},
]};

$scope.productTypes = {[
    {Name: 'typeAlpha',Type: 1},
    {Name: 'typeBravo',Type: 2},
]};
</code></pre>

<p>The HTML:</p>

<pre><code>&lt;select id="productFilter" data-ng-model="productFilter"&gt;
    &lt;option value="" selected="selected"&gt;Show all&lt;/option&gt;
    &lt;option data-ng-repeat="type in productTypes" value="{{type.Type}}"&gt;{{type.Name}}&lt;/option&gt;          
&lt;/select&gt;
&lt;p data-ng-repeat="product in products | filter:{Type:productFilter} "&gt;{{product.Name}}&lt;/p&gt;
</code></pre>