Using the value of variable of one controller into another controller in angular js

Question

I am using Angular js where i needed to send value of variable from one controller to another controller as like as Global Variable concept but i am not able to do this right now so please suggest how to solve this issue. I am attatching he code of js for reference. Here is the teeth number which value i want to use fron index.js to TeethClick.js

I am trying send the value of teethnumber from index.js given below

 (function () {
    appModule.controller('tenant.views.dentalchart.index', [
        '$scope', '$modal', 'abp.services.app.patients',
        function ($scope,$modal,patientsService) {
            var vm = this;
            var teethnumber = "";
 vm.openTeethClick = function (teeth) {
                teethnumber = teeth;
                console.log(teethnumber);
                var modalInstance = $modal.open({

                    templateUrl: '~/app/tenant/views/dentalchart/TeethClick.cshtml',
                    controller: 'tenant.views.dentalchart.TeethClick as vm',
                    backdrop: 'static'
                });

                modalInstance.result.then(function () {
                    getPatient();
                });

            };
 }
    ]);
})();

I want to access teeth number into below contoller teethClick.js

(function () {
    appModule.controller('tenant.views.dentalchart.TeethClick', [
        '$scope', '$modalInstance', 'abp.services.app.patients',
        function ($scope, $modalInstance, patientsService) {
            var vm = this;
            //var teethnumber = $scope.teethnumber;
            vm.saving = false;
            vm.patient = {};
            var teethnumber = 1;
            vm.save = function () {
                alert(vm.patient);
                vm.saving = true;
                patientsService.addPatient(vm.patient).success(function () {
                    abp.notify.info(app.localize('SavedSuccessfully'));
                    $modalInstance.close();
                }).finally(function () {
                    vm.saving = false;
                });
            };
           vm.getDefaultSurfaceID = function (teeth) {
               var surfaceDefault = teeth;
               console.log(surfaceDefault);
               if (teethnumber != null && surfaceDefault != null)
               {

               }
            };
            vm.cancel = function () {
                $modalInstance.dismiss();
            };
        }
    ]);
})();

Please suggest how can solve my this problem

Answer 1

Create an angular service to synchronize the data you want. There's a simple example of that here.

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.localData1 = App.data;
    })
    .controller('Ctrl2', function ($scope, App) {
        $scope.localData2 = App.data;
    })
    .factory('App', function () {
        var sharedObj = {
            data : {
                status: 'Good'
            }
        };

        return sharedObj;
    });