angularjs controller not executing sequentially when using asynchronous service

Question

I'm having trouble figuring out a way to use local variables in a controller that contains an asynchronous call. Is there a way to force the controller to run [at least some of] the code sequentially?

Controller:

angular.module('myApp.controllers.contacts', [])

.controller('CtrlContacts',
[       '$scope','apiUsers',
function($scope,  apiUsers){

    var selected = $scope.selected = [];

    apiUsers.getShortlist().then(function(response){

        // WILL correctly populate the associated view
        $scope.selected = response.data.data.contacts;

        // WILL NOT correctly populate the associated view
        selected = response.data.data.contacts;
        console.log(selected); // shows the correct data

    });
}

;

If apiUser.getShortlist() were not an asynchronous call, this would work just fine.

I wouldn't mind so much, but the variables can get a bit unwieldy. Additionally, it's a pain trying to cross-train people when occasional responses have to be "I'm not sure why, but do it or angular will get angry".

=========

EDIT

=========

Thanks Esteban and Greg.

Was thinking of my selected variable as an object property, like a dummy. I'm actually using "controller as" syntax, so I ended up writing my controller like this:

Controller:

angular.module('myApp.controllers.contacts', [])

.controller('CtrlContacts',
[       '$scope','apiUsers',
function($scope,  apiUsers){

    var self = this;
    var selected = $scope.selected = [];

    apiUsers.getShortlist().then(function(response){

        self.selected = response.data.data.contacts;

    });
}

;

Answer 1

This has nothing to do with 'angular getting angry'. This how references work in most programming languages. To fix your issue you can do the following:

var selected = $scope.selected = [];

apiUsers.getShortlist().then(function(response){
    selected = $scope.selected = response.data.data.contacts;
});

Alternative:

var selected = $scope.selected = [];

apiUsers.getShortlist().then(function(response){
    // this will update the array itself:
    $scope.selected.splice(0, $scope.selected.length, response.data.data.contacts);
});

Why do you need to update the selected variable?
The reason is that selected is pointing to an array you are not expecting it to. Take the following example code:

var foo,
bar;

// foo && bar both will look this: [1] && [1]
foo = bar = [1];    

// foo && bar will look this: [1] && [1,2]
bar = [1,2];

What you are changing is the reference of bar to be something different from foo. If, however you update the underlying array the reference will stay the same and your values will be the same. An example:

var foo,
bar;

// foo && bar both will look this: [1] && [1]
foo = bar = [1];    

// foo && bar will look this: [1,2] && [1,2]
bar.push(2);