problem with angularjs dropdwon search at object property (name) level

When I give my filter as
    ng-repeat="smpObj in sampleCtrl.smpList | filter:query"  

Open in new window

, I realized that my filter is searching at object level, instead object name property level. So I changed that to  
 ng-repeat="smpObj in sampleCtrl.smpList | filter:{name:query} " 

Open in new window

,  then as by  default ng-model="query" will be null/empty, so none of the drop down items are getting displayed, only search input box is getting displayed under dropdown items. How can I modify my filter so that I can have my dropdown with search option at object property (name) level.

My sample json and drop code are as follows:

<div class="dropdown">
   <div class="smp-list-selected btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
      <div class="smp-list-selected-label">{{sampleCtrl.dropdownSelectedLabel}}</div>
      <div class="caret dropdown-caret"></div>
      <div class="subscript-indicator" ng-if="sampleCtrl.isQualified(sampleCtrl.selectedsmp.id)">Qualified</div>
   </div>
   <ul class="dropdown-menu smp-list" role="menu" aria-labelledby="dropdownMenu1" auto-close="outsideClick">
      <li role="presentation" >
         <div class="input-group input-group-sm search-control-for-smps"> <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            </span>
            <input disable-auto-close  type="text" class="form-control" placeholder="Query" ng-model="query" stop-event />
         </div>
      </li>
      <li role="presentation" ng-repeat="smpObj in sampleCtrl.smpList | filter:{name:query} " ng-click="sampleCtrl.selectsmp(smpObj)">
         <a class="dd-li-item" role="menuitem" tabindex="-1" >
            {{smpObj.name}}
            <div class="subscript-indicator" ng-if="sampleCtrl.isQualified(smpObj.id)">Qualified</div>
         </a>
      </li>
   </ul>
</div>

Open in new window



 vm.smpList = [
  {
    "id": "3",
    "name": "Check",   
    "status": "Sent"
  },
  {
    "id": "4",
    "name": "Tupper",    
    "status": "In"
  },
  {
    "id": "8",
    "name": "Dangi",    
    "status": "Out"
  }

]

Open in new window

Too SmartAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
I don't know what else you're doing but the plain code you posted works as you would expect.
You can see it working HERE.

This means that the problem is not with the filter but probably with the directive (if any) itself.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Too SmartAuthor Commented:
Yes, there is some other mistake which has caused this issue, after correcting it, now it is working fine. Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.