>>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.
>
>Did you try in the init of your controller (or just at the very top) to use
>
>$scope.accountPeriods = [{}];
>
>And don't use (declare) that var accountPeriods at all in the service?
same behavior...
