title: How do I get a service to access variables in the Controller?
body: <p>I have a controller and variables declared on the $scope.</p>
  
  <p>I have two arrays holding objects, one contains available groups, other contains groups the user already belongs go. The function <code>addUserToGroups()</code> makes a call to the server to take the selected groups and add the user to those groups. But then I need to update the two arrays on my Dom reflect the change. However, the service gives me an error that the <code>assignedGroups</code> array is undefined.  </p>
  
  <p>Controller: </p>
  
  <pre><code>spApp.controller('userCtrl', 
      function userCtrl($scope,userService,groupService){
          //Generate list of all users on the SiteCollection
          $scope.users = userService.getUsers();
          $scope.selectedAvailableGroups;
          $scope.selectedAssignedGroups;
              $scope.availableGroups;
              $scope.assignedGroups;
  
          //Boolean used to disable add/remove buttons
          $scope.selectedUser = false;
  
  
          $scope.addUserToGroup = function (){
              userService.addUserToGroup($scope.selectedUser, $scope.selectedAvailableGroups)
          };
  
  
      }
  );
  </code></pre>
  
  <p>I keep passing these objects into the controller function so the service can use them and I'm sure that would work here as well, but is that really the best way to go about it? I feel like I'm just creating a bunch of global variables within that controller. Is that okay? </p>
  
  <p>Service: </p>
  
  <pre><code>spApp.factory('userService', function(){
    var addUserToGroup = function (selectedUser, selectedAvailableGroups) {
      var addToGroupPromises = [];
      var selectedGroupsLength = selectedAvailableGroups.length
  
      //Add user to selected groups on server
      for (var i = 0; i &lt; selectedGroupsLength; i++) {
        addToGroupPromises[i] = $().SPServices({
          operation: "AddUserToGroup",
          groupName: selectedAvailableGroups[i].name,
          userLoginName: selectedUser.domain
        });      
      };
  
      //when all users added, update dom
      $.when.apply($,addToGroupPromises).done(function (){
        for (var i = 0; i &lt; selectedGroupsLength; i++) {
          assignedGroups.push(selectedAvailableGroups[i]);
          //groupsAvailable.pop(selectedAvailableGroups[i]);
        };
        alert(selectedUser.name + " added to: " + JSON.stringify(selectedAvailableGroups));  
      });   
    };     
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;button type="button" ng-disabled="!selectedUser" ng-click="addUserToGroup()"&gt;Add User&lt;/button&gt;
  </code></pre>
  
  <p>I'm still very new to Angular and trying to figure out the best way to do this. Thanks. </p>
  
  <p>EDIT: Also, I did it the traditional way of just passing the $scope.asignedGroups into the function and it works but the DOM doesn't update even though the ng-option should be listening for changed to the assignedGroups. I see the assignedGroups change in Batarang but the DOM doesn't. </p>
  
  <pre><code>&lt;select id="entityAssigned" multiple
      ng-model="selectedAssignedGroups" 
      ng-options="g.name for g in assignedGroups | orderBy:'name'"&gt;                       
  &lt;/select&gt;
  </code></pre>