Having a few directives that need to be reused as elements, I've decided to implement scope isolation. Each directive is associated with its own controller, which retrieves data from MongoDB based on the URL.

The issue I'm facing is that only the last directive on the page is displaying the data it's supposed to. It doesn't matter what order I place the directives in, only the last one seems to work, although each one does function individually. For example, I can see the customer dump in the log, but unless it's the last directive on the page, nothing appears in {{ here }}.

I suspect this may be a scope problem, but these directives are meant to be isolated for reusability. So, why are they seemingly conflicting with each other?

Here is the code snippet:

JS

.controller('getCustomerList',function(customerIOService){
    _this = this;
    _this.customers = {};
    customerIOService.list()
                    .success(function(data, status, headers, config){
                        _this.customers = data;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        //console.log(data);
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer list request.';
                        }
                    });
})
.controller('getCustomerAppointments',function(customerIOService){
    _this = this;
    _this.appointments = {};
    customerIOService.getAppointments()
                    .success(function(data, status, headers, config){
                        _this.appointments = data;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the appointments list request.';
                        }
                    });
})
.controller('getCustomerSingle', function(customerIOService) {
    _this = this;
    _this.customer = {};
    _this.updateSuccess = false;

    customerIOService.one()
                    .success(function(data, status, headers, config){
                        _this.customer = data;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer fetch request.';
                        }
                    });

    _this.update = function(){
        customerIOService.update(_this.customer)
                    .success(function(data, status, headers, config){
                        _this.customer = data;
                        _this.updateSuccess = true;
                    })
                    .error(function(data, status, headers, config){
                        console.log('error Data :: ');
                        if(status == 403){
                            _this.error = 'You need to be logged in to view this page.';
                        }else{
                            _this.error = 'An error occured during the customer update.';
                        }
                    });
    }
})
.directive('customerList',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersList.html',
      replace: true,
      controller: 'getCustomerList',
      controllerAs: 'ctrl'
    };
})
.directive('customerSingle',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersSingle.html',
      replace: true,
      controller: 'getCustomerSingle',
      controllerAs: 'singleCustCtrl'
    };
})
.directive('customerAppointments',function() {
    return {
      scope: {},
      restrict:'E',
      templateUrl: 'views/templates/customersAppointmentsList.html',
      replace: true,
      controller: 'getCustomerAppointments',
      controllerAs: 'custApptCtrl'
    };
})

Parent HTML

<section>
    <div class="sectionHeader oswald font-light panel panel-default panel-body panel-success text-center">Customer Update</div>

    <div class="panel panel-default panel-body panel-success">
        <customer-single></customer-single>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-appointments><customer-appointments/>
    </div>

    <div class="panel panel-default panel-body panel-success">
        <customer-list><customer-list/>
    </div>
</section>

Directive HTML

<span>
    <a href="/appointments/create/{{custApptCtrl.customer._id}}">
            <span class="fa-stack fa-lg pull-left">
                <i class="fa fa-plus fa-stack-1x "></i>
            </span>
            Add Appointment
        </a>

<table class="table table-striped">
    <thead>
      <tr>
        <th>Caregiver</th>
        <th>Start</th>
        <th>End</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="appt in custApptCtrl.appointments">
        <td>{{ appt.employee.lastName }}, {{ appt.employee.firstName }}</td>
        <td>{{ appt.startDate }}</td>
        <td>{{ appt.endDate }}</td>
        <td><a href="/appointments/{{appt._id}}"><span class="glyphicon glyphicon-pencil"></span></a></td>
      </tr>
   </tbody>
</table>
</span>