How to handle multiple components using multiple controllers with one scope value in Angular

Question

I am new to Angular JS.

I have one template for my app, which contains multiple includes for respective controllers. Here is my indexTemplate.html and its controller is indexController.js

    <!-- MAIN CONTENT -->
    <section class="content">

            <!-- LEFT SIDE -->
            <div class="form-left-side" ng-init="getAllCityStateZip()">

                <!-- Customer info card  -->
                <div ng-controller="customerInfoController" 
                     ng-include src="'views/load/customerInfo.html'"></div>

                <!-- /left side -->
            </div>

            <!-- RIGHT SIDE -->
            <div class="form-right-side">

                <!-- Commodity card -->
                <div  ng-controller="commodityController"  
                     ng-include src="'views/load/commodity.html'"></div>

            <!-- /rightside -->
            </div>
    </section>
    <!-- /.content -->

In index controller, I am hitting an API to get datas, as follows

    $scope.loadData ={};

    //Fetch the Load Data
    loadService.fetchLoad()
        .then(function(data) {
            if (data != null) {
                $scope.loadData = data.body;
                console.log($scope.loadData)
            } 
        }, function(error) {
            var value = error;
        }
    );

Calling this $scope.loadData in other controllers such as customerInfoController and commodityController. But I am unable to see the data of load in both controllers.

I am trying to get loadData objects in customerInfoController and commodityController, it says undefined

    $scope.parent.loadData.id

it is showing undefined.Can someone explain How to handle this.

I searched in Google, so many users suggest Promise, As I have multiple controllers, not sure I can get solution using promise. As I am new to Angular I might be wrong. looking for suggestion.

Answer 1

If I understand correctly you have multiple controllers but you want to access the data in all the controllers.

The easiest solution would be to create a service that fetches the data from the API and stores it in the service. Then you would inject the service into each controller and get the data from the service.

Here's a simple example:

app.service('dataService', function() {
    var serviceData;
    this.fetchData= function () {
       loadService.fetchLoad()
    .then(function(data) {
        if (data != null) {
            serviceData = data.body;
        } 
    }, function(error) {
        var value = error;
    }
);
    }
    this.getData = function(){ return serviceData}

});

Then in each controller you would just inject your service and call getData

$scope.data = dataService.getData();

Just Make sure that fetchData is called before getData. You might be able to get away with not using a promise but most likely you will need to use promises to ensure that fetchData has completed before you call getData.