I am facing an issue with using a filter in my second view while having two views that share the same controller "TabsController as TabsVM". The filter I need to use is "item in items | filter:modelName", where modelName is located in the input field of the first view. Strangely, the filter doesn't work when the input field is in a different view from where the filter is applied. Is there a way to make it work without merging these views?
UPDATE:
I have attempted multiple solutions but have been unsuccessful in connecting the models in the filter.
first_view.html
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-controller="NavigationBarController as NavBarVM">
.......
.......
<input type="search" class="form-control" ng-model="NavBarVM.searchInputFieldText" ng-change="NavBarVM.updateSearchInputValue()"/>
.......
.......
</nav>
first_view.js
app.controller('NavigationBarController', ['$scope', 'NewProjectService', function ($scope, NewProjectService) {
var vm = this;
NewProjectService.searchInputFieldText = vm.searchInputFieldText;
vm.updateSearchInputValue = function()
{
NewProjectService.updateSearchInputFieldText(vm.searchInputFieldText);
NewProjectService.searchInputFieldText = vm.searchInputFieldText;
};
}]);
second_view.html
<div class="col-lg-8 col-md-8 col-sm-8 testTabsArea" ng-controller="TabsController as TabsVM">
.......
.......
<div class="panel panel-default" ng-repeat="panel in TabsVM.panels | filter:TabsVM.searchInputFieldText">
.......
.......
</div>
second_view.js
app.controller('TabsController', ['$scope', 'NewProjectService', function ($scope, NewProjectService)
{
var vm = this;
vm.searchInputFieldText = NewProjectService.searchInputFieldText;
............
...........
}]);
service.js
app.service('NewProjectService', function(){
...........
...........
var searchInputFieldText = '';
var updateSearchInputFieldText = function(text)
{
searchInputFieldText = text;
};
return{
updateSearchInputFieldText: updateSearchInputFieldText,
searchInputFieldText: searchInputFieldText,
};
});