[SOLVED] AngularJs filter for few values doesn't work

AngularJs filter for few values doesn't work

i am working with angularjs filter everything is working smoothly but when i am searching for a person whose salary is 30(just an example) it doesn't work, if i add one more value it starts working can anybody explain me whats wrong with it?

Plunker link https://plnkr.co/edit/bCz8jq8KSd7XCk2WmHo1?p=info

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body ng-controller="myController">
Rows to display : <input type="number" step="1" ng-model="rowLimit" max="5" min="0" />
Sort By :
<select ng-model="sortColumn">
    <option value="name">Name ASC</option>
    <option value="+dateOfBirth">Date of Birth ASC</option>
    <option value="+gender">Gender ASC</option>
    <option value="-salary">Salary DESC</option>
</select>
Search : <input type="text" placeholder="Search employees" ng-model="searchText" />
<!-- Search : <input type="text" placeholder="Search employees" ng-model="searchText.city"/> -->
Hide Salary: <input type="checkbox" ng-model="hideSalary" />
<table>
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Date Of Birth</th>
            <th>Gender</th>
            <th>Salary(number)</th>
            <th ng-hide="hideSalary">Salary(currency)</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in emp|limitTo:rowLimit|orderBy:sortColumn | filter : searchText">
            <!-- <tr ng-repeat="employee in emp|limitTo:rowLimit|orderBy:'-firstName'"> -->
            <td>{{employee.firstName | uppercase}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.DOB | date:"dd-MM-yyyy"}}</td>
            <td>{{employee.gender |lowercase}}</td>
            <td>{{employee.salary|number:2}}</td>
            <td>{{employee.salary|currency:'$'}}</td>
        </tr>
    </tbody>
</table>
</body>

</html>

**script.js** 
var myApp = angular.module('myModule', []).controller("myController", function ($scope) {
var emp = [
    {firstName:"Ben",lastName:"Ding",DOB:new Date('December 26, 1991'),gender:"Male",salary:500},
    {firstName:"John",lastName:"Deo",DOB:new Date('December 26, 1991'),gender:"Male",salary:6500.21},
    {firstName:"Rajesh",lastName:"kumar",DOB:new Date('December 26, 1991'),gender:"Male",salary:3500},
    {firstName:"Rashmi",lastName:"singh",DOB:new Date('December 26, 1991'),gender:"female",salary:8500.78},
    {firstName:"soumya",lastName:"kumari",DOB:new Date('December 26, 1991'),gender:"female",salary:30}
]
$scope.emp = emp;
$scope.rowLimit = 5;
$scope.sortColumn = name;
});

Solution

The DOB value without the filter applied is "1991-12-25T18:30:00.000Z" which includes 30 in it. That's the reason the filter is not applied. You can change the salary 30 to any other number and try, it would work. The date value will change based on the current date and time.

You can use https://momentjs.com/ to format the Date value.