How to select specific option using ng-options

Question

I am starting with an array of sources

$scope.sources = [
        {
            "type": "register",
            "name": "Register 1",
            "balance": 100
        },
        {
            "type": "register",
            "name": "Register 2",
            "balance": 100
        },
        {
            "type": "register",
            "name": "Register 3",
            "balance": 200
        },
        {
            "type": "office",
            "name": "Change Drawer",
            "balance": 200
        },
        {
            "type": "office",
            "name": "Safe",
            "balance": 500
        }
];

I'm successfully loading the options

<div class="form-group">
    <label>Transfer <strong>{{amount(count, start, selectedItem.balance) | currency}}</strong> To:</label>
    <select id="transferTo" class="form-control" ng-model="form.to" ng-options="item.name for item in sources | filter:{type:'office'}">
        <option value="">-- Select a Source --</option>
    </select>
</div>

I've tried using a $timeout function to select it after it works, but it doesn't pass back the correct value to my function

$timeout(function () {
    $('#transferTo').val('1');
}, 200);

How would I set the "Safe" as the default option selected when the form loads?

Answer 1

You will need to set a value on your scope that you're setting ng-model equal to:

$scope.form.to = $scope.sources[4];

If your list (sources) is dynamic you can filter the array like this, which will return an array (but leave your array untouched).

filterFilter($scope.sources, {name: 'Safe'})

fiddle