Filtering a table using select, from same model

Question

I've got a controller and its model. I'm generating a table from this model, I then produce a select box via ng-options from this same model filtered by angular-ui-utils unique filter to only show unique values from one of the properties in the model (sleep, date etc). This seems to work, I get unique values in my select.... But... selecting one, I would expect the table to be filtered on this selection but it doesn't, and once an option is selected in the select, all other options vanish. :( Code below.

I got the table to filter once, by generating the select options via ng-repeat, but that didnt allow me to filter for unique values the way this approach does.

PS: I'm pretty new to angular.

'use strict';
angular.module('DealsApp')
.controller('MainCtrl', function ($scope, $http) {

$scope.init = function(){


        $scope.results = [
            {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Arnica', 'offer1' : true, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'},
            {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Grange', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'},
            {'date' : '09/02/2014', 'resort' : 'Tignes', 'sleeps' : '12-14', 'chalet' : 'Chartreux', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : false, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '549', 'pricenow' : '366'},
            {'date' : '15/02/2014', 'resort' : 'La Plagne', 'sleeps' : '8-9', 'chalet' : 'Arnica', 'offer1' : false, 'offer2' : false, 'offer3' : false, 'offer4' : true, 'offer5' : false, 'offer6' : false, 'offer7' : false, 'pricewas' : '639', 'pricenow' : '249'},
            {'date' : '08/02/2014', 'resort' : 'La Plagne', 'sleeps' : '10-13', 'chalet' : 'Renard', 'offer1' : true, 'offer2' : false, 'offer3' : false, 'offer4' : false, 'offer5' : false, 'offer6' : false, 'offer7' : true, 'pricewas' : '1039', 'pricenow' : '699'},
        ];          

};

$scope.init();
});

Template

<div class="row">
<div class="col-md-12">
<form class="" role="form">
  <div class="form-group">
    <label>Dates ng-options</label>
    <select name="datefilter" class="form-control" ng-model="results" ng-options="d.date for d in results | unique: 'date'">
      <option value="">-- Choose a date --</option>
    </select>
  </div>
  <div class="form-group">
    <label>Sleeps</label>
    <select class="form-control" ng-model="results" ng-options="s.sleeps for s in results | unique: 'sleeps'" ></select>
  </div>
</div>
</form>
</div>
<div class="row">
<table class="table table-striped" ng-model="results">
<tr>
  <th>Date</th>
  <th>Resort</th>
  <th>Sleeps</th>
  <th>Chalet</th>
  <th><small>Free Massage*</small></th>
  <th><small>Buy 2 get 1 Free lift Pass**</small></th>
  <th><small>BOGOF Ski Hire</small></th>
  <th><small>£10 Ski Hire</small></th>
  <th><small>Free Group Leader Pass</small></th>
  <th><small>Green Discount</small></th>
  <th><small>Repeat Guest Discount ***</small></th>
  <th>Price was</th>
  <th>Price now</th>
</tr>
<tr ng-repeat="result in results">
  <td>
    {{ result.date | date:'medium' }}
  </td>
  <td>
    {{ result.resort }}
  </td>
  <td>
    {{ result.chalet }}
  </td>
  <td>
    {{ result.sleeps }}
  </td>
  <td>
    {{ result.offer1 }}
  </td>
  <td>
    {{ result.offer2 }}
  </td>
  <td>
    {{ result.offer3 }}
  </td>
  <td>
    {{ result.offer4 }}
  </td>
  <td>
    {{ result.offer5 }}
  </td>
  <td>
    {{ result.offer6 }}
  </td>
  <td>
    {{ result.offer7 }}
  </td>
  <td>
    {{ result.pricewas | currency:'£' }}
  </td>
  <td>
    {{ result .pricenow | currency:'£' }}
  </td>
</tr>
</table>
</div>

Edited: Now my select options change once an initial selection is made and the model is fitlered. I make my select options into an array with this code. availabelDates being the model I'm now using to filter results. When I select a date, the select options change to display the selected date as each character as individual options e.g. 0, 8, /, 0, 2, /, 2, 0, 1, 4

angular.forEach($scope.results, function(value, index){
            this.push(value.date);

}, $scope.availableDates);

Answer 1

Answer to initial question

by using ng-model="results" for your dropdowns you are overwriting the results variable when you select an option

For updated question

You need to create your $scope.availableDates (as an array) before using it as a context to forEach

$scope.availableDates = [];
angular.forEach($scope.results, function(value, index){
            this.push(value.date);

}, $scope.availableDates);

Also you should use ng-repeat for the options if you want the -- choose ..-- part to return all rows..

Demo at http://plnkr.co/edit/B6UrF9