AngularJs: Search using filter option is not working properly

Question

I have a issue with Filter text in angularjs.

I have a project JSON array called "projects"

[{ "projectId": 1, "Name": "TestProject", "openIssueCount": "5"}, { "projectId": 2, "Name": "TestProject1", "openIssueCount": "7"}, { "projectId": 3, "Name": "TestProject2", "openIssueCount": "8" }]

HTML for search filter

       <section class="vbox">
        <header class="header clearfix dk b-b b-light issueheader" style="padding-top: 0px; padding:5px;top:0;">
                <div class="input-group" style="margin-left: 0px !important;">
                     @*textbox for search*@
                    <input type="text" data-ng-model="query.Name" class="input-sm form-control input-s-sm" style="line-height: none !important;" placeholder="Search" />
                    <div class="input-group-btn">
                        <button class="btn btn-sm btn-default" data-ng-show="!query.length" style="line-height: none !important;">
                            <i class="fa fa-search"></i>
                        </button>
                        <button class="btn btn-sm btn-default" data-ng-show="query.length" data-ng-click="query=''" style="line-height: none !important;">
                            <i class="fa fa-times" title="Clear"></i>
                        </button>
                        <button class="btn btn-sm btn-bg btn-default" data-toggle="tooltip" data-placement="bottom" style="margin-left: 2px !important;"
                                data-title="Refresh" data-original-title="" title="">
                            <i class="fa fa-refresh"></i>
                        </button>
                    </div>
                </div>
            </div>

        </header>
        <section class="scrollable projectScroll">
            <div class="list-group no-radius no-border no-bg m-t-n-xxs m-b-none">
                <div data-ng-repeat="project in Projects | filter:query" href="#" class="list-group-item list-group-item-p ng-cloak activeProject"
                     data-ng-click="ViewIssues(project,'Issues')" data-ng-class="{active: project.ID == target}"
                     data-ng-cloak="" href="@Url.Action("Index", "Issues")">
                    <div class="text-lt font-bold">
                        <span class="project-heading">{{project.Name}}</span>
                    </div>
                    <small>Open Issues : </small><small class="text-danger">{{project.OpenIssueCount}}</small>
                    <a class="new-issue" href="javascript:void(0);" data-ng-click="CreateNewIssue(project,'Issues/New')" 
                    style="padding-top:4px;text-decoration:underline !important;margin-right:-5px !important;">New Issue</a>

                </div>
            </div>
        </section>
    </section>

My search works fine in between sometimes not always,I am not able to understand the reason behind this.Actually I have a side panel in which my projects list is rendered.It is present in partial view.Please suggest why my search not works always.