Reset selector does not reset the table data properly

Question

I have a selector with multiple options and a reset button which when is clicked must reset the selector to the first option.

The selector is reset when the button is clicked but the data in the table is not changed.

These are the selector and the button:

<select ng-model="$ctrl.type">
    <option value="">First option</option>
    <option value="Second option">Second option</option>
    <option value="Third option">Third option</option>
</select>

<div class="btn action-btn" ng-click="$ctrl.doReset()">
    Reset options
</div>

the selector filters the data in a table:

<tbody>
    <tr ng-repeat="rows in $ctrl.myData | filter: {Type:type} track by $index">
        <td>
            <span>{{rows.Type}}</span>
        </td>
        <td>
            <span ng-repeat="row in rows.Parameters track by $index">{{rows.Parameters[$index]}}</span>
        </td>
        <td>
            {{rows.OccuranceDate}}
        </td>
    </tr>
</tbody>

the selector, button and table are all in the same html page.

in the controller I have this:

class MyCtrl {
    constructor(MyService, $stateParams) {
        this.MyService = MyService;
        this.loading = true;
        ...

    }
    $onInit() {
        ...
    }
    ...

    doReset() {
        this.type = "";
    }
}

The first option has the value "", that's what I try to do in doReset(), it resets the option in the selector to the first one but not the data in the table. I want to reset also the table data.

Any idea what's wrong?

Answer 1

Your problem is with your filtered variable, your filter is filter: {Type: type} but it should be bound to your $scope ($ctrl) variable like so: filter: {Type: $ctrl.type}

Please see example here