Trying to share a dynamic variable between 2 controllers - Angular

Question

Variable is named searchTextand it is what will be typed in the search box by the user

<input type="text" class="form-control" ng-model="searchText"  placeholder=" Type KvK-nummer and Press Enter" id="typehead">

Example URL: http://localhost:8091/odata/dll-poc-dv/Account('41-125061-0000') //in brackets is the searchTeaxt

What I want to achieve is to hold the value of searchText and use in 2 different controllers to pass the searchText in URL to receive data. So I get the variable in the serivce and share that service with 2 controllers:

 angular.module('serviceModule',[])
        .factory('dataService',['$http', dataService]);

    function dataService($http,$rootScope,$scope){
      return{
            getSearchText:getSearchText,
            setSearchText: setSearchText,
            getMainData: getMainData
        };
     var searchText;

   function setSearchText(value){
         searchText = value;
      };
   function getSearchText(){
        return searchText;
    };

   function getMainData(id){
       return $http.get("http://localhost:8091/odata/dll-poc-dv/Account(kvk='"+id+"')").then(
            function (result){ console.debug(result);return result.data.d.results})

    };
$scope.$watch('searchText',function(newVal,oldVal){
            console.log(newVal,oldVal);
        })
};

First Controller:

    angular.module('mainPage',['serviceModule'])
      .controller('MainCtrl',['$scope', '$http','dataService', function ($scope, $http,dataService) {

   dataService.setSearchText($scope.searchText);

    $scope.getMainData = function(kvk){ 
    $scope.getMainData = function(){
        dataService.getMainData($scope.searchText).then(function(data){
            $scope.getData= data;
        })
        };

      }]);

Second Controller:

angular.module('profileDetail',['serviceModule'])
    .controller('ProfileCtrl', ['$scope','$filter','$http','$q','$routeParams','dataService','moment',function($scope,$filter,$http,$q,$routeParams,dataService,moment){
        // initial grab of the right data
        function init (){

        var searchText = dataService.getSearchText();

        dataService.getMainData(searchText).then(function(data){
            $scope.getData = data;
        });
    }

     init();
    }]);

Answer 1

Why don't you actually save the variable in the service? Since the service is a single instance and you can access that variable across controllers.

angular.module('app')
   .factory('dataService',['$http', dataService]);



    function dataService($http,$rootScope,$scope){
    var searchText = "";

    function setSearchText(value) {
        searchText = value;
    }

    function getSearchText() {
        return searchText;
    }

      return{
          setSearchText: setSearchText,
          getSearchText: getSearchText
      };


};

This way can set the variable in 1 controller then access it in another controller with the service methods, no need to have any rootScope stuff going on.

So in the Controller A you can set the variable first -

(function (angular) {
'use strict';

angular.module('app')
    .controller('ControllerA', ['dataService', ControllerA]);

function ControllerA(dataService) {
    var vm = this;

    // Set the variable from this controller
    dataService.setSearchText("blabla");

};
})(window.angular);

Then access it in Controller B -

(function (angular) {
'use strict';

angular.module('app')
    .controller('ControllerB', ['dataService', ControllerB]);

function ControllerB(dataService) {
    var vm = this;

    // Set the variable from this controller
    var searchText = dataService.getSearchText();

};
})(window.angular);

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