angularjs ng-repeat list not updated when element is added/removed

Question

There is a list of users retrieved from a rest api. Here is the template

<div ng:controller="UserController">
    <a ng-click="createUser()">Create User</a>

    <div ng-view>
        <ul>
            <li ng-repeat="user in users">
                 {[{user.first_name}]} {[{user.last_name}]} 
            </li>
        </ul>
    </div>
 </div>

The JS:

function UserController($scope, User, Group){
    $scope.users = User.query();

    $scope.createUser = function(){

        //$scope.users = null;
        //$scope.users.pop();
        //$scope.users.push(new User({id:'5'}));

        console.log($scope.users);
    }
}

The service: http://dpaste.com/1065440/

All users a retrieved and listed correctly. The problem is that I cannot manipulate the rendered list at all. No matter what I do push, pop or set to null. The list does not change in the template. However the last log statement shows the changes, it prints e.g. NULL when the users array is set to null.

Any ideas where the problem is?

Answer 1

The object you push into the array should be an instance of User

function UserController($scope, User){

    $scope.users = User.query();

    $scope.createUser = function(){
        $scope.users.push(new User({first_name:'Bob', last_name: 'Schmitt'}));
    }   
}

So, use new User({})

From our conversation, it seems the problem was in the routing. The same outer controller was assigned to the partial that was being loaded in the ng-view. Removing ng:controller="UserController" and moving the createUser button to the partial would solve the problem, but if there's really a need to call the createUser method from outside of ng-view, then all the data related to it will need to be in the outer controller. So, you can keep your outer controller as it is, and change your route to use an empty placeholder controller.