Creating Filters Inside of Angular Directive

Question

Im curious as to why this angular filter will work outside of an Angular directive but not inside. Can someone provide an explanation?

For instance, in the Plunkr below I've added a search filter which will work outside of the Bootstrap Angular UI accordian but when removed and added inside, it doesn't work?

http://plnkr.co/edit/GdFvay?p=preview

 <div class="col-sm-4">
      <input type="text" ng-model="searchText" class="form-control" placeholder="Search All"> 
      <div>
        <accordion close-others="oneAtATime">
          <accordion-group >
            <accordion-heading>
              Search
            </accordion-heading>
            <input type="text" ng-model="searchText" class="form-control" placeholder="Search All"> 
          </accordion-group>
        </accordion>

rmuller rmuller · Accepted Answer · 2014-12-11T15:10:00

The accordion-group directive has an isolated scope. Try it again using the dot notation (important when dealing with scope inheritance)

for example, change the ng-model to:

ng-model="searchForm.input"

and you will see that it will work.

Please refer to:

AngularJS documentation on scopes

Egghead video on the dot notation

Creating Filters Inside of Angular Directive

1 Answers