I have $scope.accountPeriods and an ng-repeat "p in accountPeriods" in the html which works perfectly with a return list from the database.

<li class="dropdown" dropdown ng-show="environments" >
    <a href="#" class="dropdown-toggle" dropdown-toggle>
        {{(environment.value) || "Select an environment"}} <b class="caret"></b>
    </a>

    <ul class="dropdown-menu arc-dropdown" ng-init="ppage=0">
        <li ng-repeat="e in environments|skipTake:ppage*10:10">
            <a ng-click="selectEnvironment(e)">{{e.value}}</a>
        </li>
        <li class="tempnavigation">
            <ul>
                <li>
                    <a ng-click="navigate(ppage=(ppage-1)>0?ppage-1:0,$event)">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                </li>
                <li>
                    <a ng-click="navigate(ppage=(((ppage+1)*10>=environments.length)?ppage:ppage+1), $event)">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</li>
{{accountPeriods}}
<li class="dropdown" dropdown ng-show="accountPeriods">
    <a href="#" class="dropdown-toggle" dropdown-toggle>
        {{(accountPeriod.value) || "Select an accountPeriod"}} <b class="caret"></b>
    </a>

    <ul class="dropdown-menu arc-dropdown" ng-init="ppage=0">
        <li ng-repeat="a in accountPeriods|skipTake:ppage*10:10">
            <a ng-click="selectAccountPeriod(a)">{{a.value}}</a>
        </li>
        <li class="tempnavigation">
            <ul>
                <li><a ng-click="navigate(ppage=(ppage-1)>0?ppage-1:0,$event)"><span class="glyphicon glyphicon-chevron-left"></span> </a></li>
                <li>
                    <a ng-click="navigate(ppage=(((ppage+1)*10>=accountPeriods.length)?ppage:ppage+1), $event)">
                        <span class=" glyphicon glyphicon-chevron-right">
                        </span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</li>

These values are populated in a call to a service:

 function arcBreadcrumbService($http, $q, arcEnvironmentService, arcAccountPeriodService) {
      var n = $q.defer();
      var o;
      var environments = arcEnvironmentService.all();
      var accountPeriods = []; //arcAccountPeriodService.all();
      var setNames = function (obj) {
          o = obj;
          if (o.environments && o.accountPeriods) {
              n.resolve(o);
          }
      };

Which yields what is show in the attachment.

When I select an environment, I want to get a new list of account periods for said environment.


so this code fires:

  $scope.selectEnvironment = function (p) {
                    accountPeriodFactory.getlist(p.id).then(function (data) {
                        $scope.accountPeriods = data;
                    });

                    var name = $rootScope.$state.current.name;
                    $rootScope.$state.go(name, {
                        environment: p.id
                    });


                    return false;
                };

The problem is that data in the above example contains an [object(Array)] containg an array of accountperiods for the correct environment. $scope.accountPeriods is then set to data, on upon inspection shows the requisite data array.

When $scope.accountPeriods is changed, the accountPeriods in the html still contains the empty list we set it to in the service. We place {{accountPeriods}} in the html and it display nothing as shown in the attached png. {{environments}} on the same html display a ton of environments. Both environments and accoutPeriods are on $scope.

Any ideas on how to make this be seen in the html? We've tried $.scope.$apply (error- digest is already running) and about 20 other solutions from stack overflow, all to no avail.

Thanks in advance.