ng-switch element in layout issue

Question

I am using ng-switch to create a filtering input field in the layout. I am switching on the route name and I use this field to filter the data in ng-repeat on each page.

div(ng-controller="NavbarCtrl", ng-switch on="route.current.name")
                input.filter(ng-switch-when='offers',type="text", ng-model="$parent.$parent.search.title")
                input.filter(ng-switch-when='merchants',type="text", ng-model="$parent.$parent.search.name")

The problem with this approach is that the value that I input on one page stays saved when navigating to the other route and filters data on the other page as well. I am using the inbuilt angular search filter, hence the model names.

Can I somehow reset the value of the filter on route change?

Another issue is that I find this $parent.$parent scope access impractical, but i couldn't find a more elegant way.

Any hints greatly appreciated!

Answer 1

As discussed in the comments, the confusion was around the search property, which is not a special filter in Angular, but just the name of a property that will be used with Angular's filter filter.

Also, $parent is not needed if a property on a parent scope object is used/referenced. I.e., if $scope.search = { ... } is defined in the parent scope, child scopes (but not directive isolate scopes) can access this object via normal JavaScript prototypal inheritance.