How does one scope an Angularjs factory service to

Question

I'm new to angularjs and have been attempting to use the angularui modules to build an accordion. For each accordion header I have a nested tag to which calls my service factory. The service factory returns data according to the id and updates my inner accordion content however it updates it for all of the accordion headers. So in other words, clicking on an accordion header will load the same content for all accordion divs. I would like it to return only to the clicked header. I believe I need more help in understanding the scope of my factory service. So my question is if someone can help me understand how to get my service factory to only update it's caller.

my html:

<accordion close-others="false">
<accordion-group ng-repeat="dept in departments"> 
  <accordion-heading>
    <span ng-controller="DeptHeaderCtrl" ng-click="loadEmps(dept.DeptID)">
      {{dept.DepartmentName}} ({{dept.DepartmentShortName}})
    </span>
  </accordion-heading> 
  <div ng-controller="departmentList">
    <div ng-repeat="emp in deptemps">
      {{emp.Name_First}}
    </div>
  </div>
</accordion-group>

angularjs factory service code:

app.factory('DeptFactory', function ($http, $rootScope) {
      var sharedDeptEmpList = {};

      sharedDeptEmpList.EmpList = '';

      sharedDeptEmpList.fetchDeptEmps = function (deptid) {
        var dept = { "userid": userid, "deptid": deptid };

        $http({ method: 'POST', url: 'api/Fetch/DeptEmployees/', data: dept }).
      success(function (data, status, headers, config) {
        EmpList = data;
        sharedDeptEmpList.broadCastEmpList();
      }).
      error(function (data, status, headers, config) {
        alert('error');
      });

      };

      sharedDeptEmpList.broadCastEmpList = function () {
        alert('broadcasting');
        $rootScope.$broadcast('handleBroadcast');
      };


      return sharedDeptEmpList;

    });

Angularjs controller that receives broadcast:

app.controller('departmentList', function ($scope, $http, DeptFactory) {

      $scope.init = function (p_userid) {
        userid = p_userid;
      };


      $scope.$on('handleBroadcast', function () {
        alert('broadcast received');
        $scope.deptemps = EmpList;
      }); 

  });

Answer 1

Each directive is just some javascript that associates a DOM node with a given scope. The same way you think of the DOM tree, you can think of a "scope tree". On the other hand, services are just singleton objects that can be injected and used anywhere. They have no implicit relationship to the DOM/scope tree.

By injecting $rootScope into your DeptFactory, you are giving it access to the entire scope tree. When you call $broadcast(), you are sending an event throughout the entire tree, beginning at the root, and then propagating outwards to all of the leaf scopes.

I don't see enough of your code to completely understand what's happening, but I'm guessing that you're seeing all of your accordion divs change because they are all receiving your $broadcasted event, and reacting to it the same way. I would suggest you $broadcast some sort of ID value to identify which div you are trying to change. Then, when you handle this event in each accordion, check the ID against the accordion's ID to see it should change or not.

Does this help?