Angular ng-repeat update in http.then - angularjs

Question

this is my first question so I apologize if I break any protocol. Anyway. I'm trying to have my ng-repeat update in the then clause of my service call. USE CASE: User logs in via an ajax call and then a call is made for that users 'items'. For example, here is what is in my controller:
appControllers.controller('UserCtrl', function($rootScope, $scope, sessionService, alertService, $modal, itemService){
$scope.login = function() {
$scope.loggedInUsersItems = [];
sessionService.login($scope.account).then(
function(data) {
alertService.add('success', 'You are logged in.');
itemService.getItemsByUserName($rootScope.loggedinUserName).then(
function(data){
$scope.loggedInUsersItems = data.data;
}
)
},
function() {
alertService.add('danger', 'There was a problem logging in. Check your credentials and try again.');
}
)
};
...
I think I looked at every question on stack and elsewhere and I keep on spinning my wheels. I tried doing a $scope.$apply(), but that resulted in the expected digest already happening error. I also tried .push() and iterating and pushing, as well as placing the itemService.getItemsByUserName in a chained then with no luck. I'm new to Angular, but I believe I understand $scope is not to be in the service layer, so I'd like to avoid that.
I should mention that the login process is working great, and I do set some $rootScope items in the login service and I see my view updating as a result of successful login (such as the authenticated div showing and a success message). The only thing that doesn't update is my ng-repeat. EDIT to provide more details: The snippet below is already on the view when the login is fired. Login is done using a modal - the user fills in credentials and hits login and the controller is fired. Not sure if this information changes anything but I thought I'd try giving more details.
<div ng-show="authenticated">
...
<tr class="text-left" ng-repeat="item in loggedInUsersItems">
<td>{{ item.itemName }}</td>
<td>{{ item.itemType }}</td>
</tr>
...
</div>
Here is my the snippet in my service:
...
service.getItemsByUserName = function(username){
return $http.get('useritems', {params: { username: username }})
};
...

Answer 1

use reference to the current scope to keep your controller in current state.
Try AngularJS’s Controller As and the vm Variable
appControllers.controller('UserCtrl', function($rootScope, $scope, sessionService, alertService, $modal, itemService){
var vm=this;
vm.login = function() {
vm.loggedInUsersItems = [];
sessionService.login(vm.account).then(
function(data) {
alertService.add('success', 'You are logged in.');
itemService.getItemsByUserName($rootScope.loggedinUserName).then(
function(data){
vm.loggedInUsersItems = data.data;
}
)
},
function() {
alertService.add('danger', 'There was a problem logging in. Check your credentials and try again.');
}
)
};
HTML
<div ng-controller="UserCtrl as vm">
<tr class="text-left" ng-repeat="item in vm.loggedInUsersItems">
<td>{{ item.itemName }}</td>
<td>{{ item.itemType }}</td>
</tr>

Answer 2

The way I see it you're doing the following:
sessionService.login($scope.account)
returns a promise that resolves and your .then().. code executes. Presumably you see this happen and it's okay. Your alertService fires the .add method correctly. You call the following line which also returns a promise:
itemService.getItemsByUserName($rootScope.loggedinUserName)
This too resolves at your .then() and you try to set the bound variable to the new value retrieved from the promise:
$scope.loggedInUsersItems = data.data;
Could you log console.log($scope.loggedInUserItems) to see if it correctly gets the value which is a list of objects each of which contain a property called itemType and itemName? This last part is crucial because if the formatting of your returned object doesn't match your html it won't end up showing anything.