Dynamically load Angular UI-Bootstrap accordian from controller

Question

I'm using an array in my controller to store a list of names. Depending on the company the user clicks on, however, that list will obviously change many times after the page is loaded.

I have a controller method that loads the list into an array. That array is bound as the source for multiple <li> items for the accordian.

These items display fine if they're present when the page loads. However I can't get the list to reflect any change in the data stored in the array. Any idea how to change the accordian <li> items when the array data changes?

View

  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group is-open="status.open">
        <uib-accordion-heading>
            Users <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </uib-accordion-heading>
        <ul>
            <li ng-repeat="group in userList">{{group}}</li>
        </ul>
    </uib-accordion-group>
  </uib-accordion>

Controller

scope.userList = null;

var loadFirmUsersSuccess = function(data){
    scope.userList = $.map(data.data.data[0].theList, function(item){
        return item.billFirst + ' ' + item.billLast;
    });
};

Answer 1

Thanks to the comment above I realized I wrote the return statement incorrectly. The code below works.

    var loadFirmUsersSuccess = function(data){
        scope.userList = $.map(data.data.data[0].theList, function(item){
            return {id: item.id, name: item.billFirst + ' ' + item.billLast};
        });
    };