AngularJS- How to pass data from one controller to

Question

So I am trying to share data between two controllers on an on-click event. My code is as follows:

Controller

function userTypeController($scope, $location, CategoryService) {
  let vm=this;

vm.getCat=function(){

    CategoryService.getCategories() .then(function (response) 
        {
          $scope.categories=response.data.data.categories;
          $scope.index = 0;
          $scope.array = [];
          for(var i=0; i<$scope.categories.length/2;i++)
          $scope.array.push(i);


                                       });
    $location.path('/category');
};
  };

Say in my html for that controller, I have a button that calls the getCat function.

 <md-button md-whiteframe="8"  ng-click="utCtrl.getCat()">Submit<md-button>

In my category service , I have a function that returns a list of categories.

Service

return {
            getCategories: function () {
                return $http.get(url2);
            }

Now i want the array of categories that I get from the server to be accessible in my Categories controller. I was using $rootScope before to share the date from usertype controller to the other one but its not the ideal thing to do. I want $scope.array to be accessible in my categories controller so i can display that in its view. What would be the best way to do this. Thanks a lot!

Answer 1

This will get you results instantly, No need of service or anything,You can use $broadcast for multiple controllers as well :

<div ng-app="myApp" ng-controller="myCtrl"> 

    <button ng-click="sendData();"></button>

</div>


<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($rootScope, $http) {
        function sendData() {
            var arrayData = [1,2,3];
            $rootScope.$emit('eventName', arrayData);
        }
    });
    app.controller('yourCtrl', function($rootScope, $http) {
        $scope.$on('eventName', function(event, data) {
            console.log(data); 
        }); 
    });
</script>

Answer 2

You should consider using a service in this case to share the data across your controllers.

SharedService.js

app.service('sharedService', function(){
  var categories = [];  
  names.add = function(incategories){
    categories = incategories;
  };
  names.get = function(){
    return categories;
  };     
});

then inject in your controller1 and controller2 and use depending on your requirement.

 app.controller("TestCtrl", 
   function($scope,sharedService) {
    $scope.categories =[];
    $scope.save= function(){
      sharedService.add(yourcat);
    }   
   }
  );

and then use it as,

 app.controller("TestCtrl2", 
   function($scope,sharedService) {      
   $scope.getcategories = function(){
     $scope.categories = sharedService.get();
   }
  }
 );