Search functionality: Update a different view from index.html

Question

I have an REST api made in Laravel where I use AngularJS as Frontend. In my index.html I have a navbar which is visible in all views. On my navbar I'll implement a input field which should be use for searching depends on which view is active. On my navbar bare I have 4 tabs which will navigate to a view and fetch data from my api.

Each tab has a controller which contain CRUD functions.So my question is how can I fetch the data for the view which is visible by submitting the search form.

Here is my app.js where I define all state and have a controller for my index.html.

    var app = angular.module('myApp', ['ui.router', 'satellizer', 'ngStorage'])
        .config(function($stateProvider, $urlRouterProvider, $authProvider,$provide) {


        $authProvider.loginUrl = 'http://.../authenticate';
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'view/home.html',
                controller: 'authController'
            }).state('register', {
                url: '/register',
                templateUrl: 'view/register.html',
                controller: 'authController'
            }).state('login', {
                url: '/login',
                templateUrl: 'view/login.html',
                controller: 'authController'
            }).state('companies', {
                url: '/company?page',
                templateUrl: 'view/company/companies.html',
                controller: 'companyController'
            }).state('company', {
                url: '/company/:id',
                templateUrl: 'view/company/company.html',
                controller: 'companyController'
            }).state('users', {
                url: '/user?page',
                templateUrl: 'view/user/users.html',
                controller: 'userController'
            }).state('user', {
                url: '/user/:id',
                templateUrl: 'view/user/user.html',
                controller: 'userController'
            }).state('offerposts', {
                url: '/offerpost?page',
                templateUrl: 'view/offerpost/offerposts.html',
                controller: 'offerpostController'
            }).state('offerpost', {
                url: '/offerpost/:id',
                templateUrl: 'view/offerpost/offerpost.html',
                controller: 'offerpostController'
            }).state('wantedposts', {
                url: '/wantedpost?page',
                templateUrl: 'view/wantedpost/wantedposts.html',
                controller: 'wantedpostController'
            }).state('wantedpost', {
                url: '/wantedpost/:id',
                templateUrl: 'view/wantedpost/wantedpost.html',
                controller: 'wantedpostController'
            });


        function redirectWhenLoggedOut($q, $injector) {
            return {
                responseError: function (rejection) {
                    var $state = $injector.get('$state');
                    var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid'];

                    angular.forEach(rejectionReasons, function (value, key) {
                        if (rejection.data.error === value) {
                            localStorage.removeItem('user');
                            $state.go('login');
                            console.log("hej");
                        }
                    });

                    return $q.reject(rejection);
                }
            }
        }

        $provide.factory('redirectWhenLoggedOut', redirectWhenLoggedOut);

    });



app.controller('mainCroller',
    function ($scope, $state, $location, $auth, $rootScope, $localStorage, $window) {

        $scope.testUrl = "http://.../admin/";
        $rootScope.url = $scope.testUrl;

        $rootScope.currentUser = $localStorage.currentUser;

        console.log($localStorage.currentUser);

        $rootScope.getPages = function(num) {
            return new Array(num);
        };



        $scope.navClass = function (page) {
            var currentRoute = $location.path().substring(1);
            return page === currentRoute ? 'active' : '';
        };

        $scope.loadLogin = function () {
            $state.go('login');
        };

        $scope.loadRegister = function () {
            $state.go('register');

        };

        $scope.loadCompanies = function () {
            $state.go('companies', {page:1});
        };

        $scope.loadUsers = function () {
            $state.go('users', {page:1});
        };

        $scope.loadOfferposts = function () {
            $state.go('offerposts', {page:1});
        };

        $scope.loadWantedposts = function () {
            $state.go('wantedposts', {page:1});
        };

        $scope.logout = function() {
            $auth.logout().then(function() {
                $localStorage.$reset();
                $rootScope.currentUser = "";
                $state.go('login');

            });
        };

        $scope.isAuthenticated = function() {
            return $auth.isAuthenticated();
        };


    }); 

Answer 1

You can use an event to accomplish this quite easily. In your search controller you can broadcast an event on the scope (I'll use $rootScope for this example):

function search() {
  $rootScope.$broadcast('search-initiated', {searchText: $scope.searchText});
}

Then in each of your other controllers you can listen for this event:

$rootScope.$on('search-initiated', function(event, args) {
  // do something with the search text
  var searchText = args.searchText;
});