Unselecting ng-options dropdown in AngularJS

Question

I've created a select dropdown using ng-options that is used to filter a list on the page.When the page loads, the dropdown is blank and no filtering has occurred.

When I select an option, filtering happens properly, but the blank option disappears, and thus I am forced to have a department-filtered version of the list unless I refresh the page and start over:

Before:

After:

Here is my code:

.html file:

         Department:
        <select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"></select>
        
        <br />
        <div class="span10">
            <!--Body content-->

            <ul>
                <li ng-repeat="(index,e) in filteredEmployees | filter:search | orderBy:orderProp | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize"
                    class="thumbnail employee-listing">
                    <a href="#/Employee/{{e.EmployeeID}}" class="thumb">
                        <img style="height: 100px; width: auto;" ng-src="../Images/CurrentEmployees/{{e.ImageName}}"></a>
                    <p><a href="#/Employee/{{e.EmployeeID}}">{{e.FullName}}</a></p>
                    <p>{{e.Department}}</p>
                </li>
            </ul>

I want to be able to return it to the blank option so that I have a completely unfiltered list. Doing a value="" option or just completely empty doesn't work, because it's filtering based on value, and nothing matches the empty value.

Any Help or direction would be much appreciated!

Answer 1

Thanks everyone for the responses, I took a mix of a few of your responses, added in a watch and achieved what I wanted, here is what I ended up with:

<select ng-model="search.SubDepartmentID" ng-options="d.SubDepartmentID as d.DepartmentLabel for d in DepartmentList"><option value=""></option></select>

So I did add the empty value, but I modified the watch that I already had in my controller to set the $scope.search.SubDepartmentID to undefined if it comes back null:

$scope.$watchCollection('[search.$, search.Status, search.SubDepartmentID]', function (newSearch) {
    if ($scope.search != undefined) {
        if ($scope.search.SubDepartmentID == null) {
            $scope.search.SubDepartmentID = undefined;
        }
    }
});

The $scope.search.SubDepartmentID is undefined upon page load, and resetting it to undefined on select of the empty value did the trick!

Thanks again for all your help!