How can I make ng-init to trigger ng-change?

Question

I just started learning Angular. There is a <select> element that should fill the input elements below with one of some presents.

This is my view.

<select
    ng-model="selection"
    ng-options="preset.name for preset in presets"
    ng-init="selection=presets[0]"
    ng-change="select()"></select>

<input ng-model="name" type="text"/>
<textarea ng-model="description"></textarea>

This is my controller.

$scope.presets = [
    { name: 'Lorem ipsum', description: 'Dolor sit amet.'   },
    { name: 'Consectetur', description: 'Adipisicing elit.' },
    { name: 'Sed do',      description: 'Eiusmod tempor.'   },
];

$scope.select = function() {
    $scope.name        = $scope.selection.name;
    $scope.description = $scope.selection.description;
};

When I load the page, I can see the first option selected. But the input fields remain blank until I manually change the selection. Why doesn't Angular set the input fields automatically in the first place and what can I do about it?

Answer 1

The reason it does not set the text fields initially is because there is no binding setup for $scope.name and $scope.description until select() is called. You could set it up initially in your controller function:

$scope.init = function(selected) {    
    $scope.selection = selected;
    $scope.name = $scope.selection.name;
    $scope.description = $scope.selection.description;
}
$scope.select = function() {
    $scope.name        = $scope.selection.name;
    $scope.description = $scope.selection.description;
};

And in your HTML:

<select
    ng-model="selection"
    ng-options="preset.name for preset in presets"
    ng-init="init(presets[0])"
    ng-change="select()"></select>

Alternative Method:

Alternatively, you can have the input fields bind to the same selection model. That way, when the selection model is updated on the scope, it will update all the associated views.

Change the model to 'selection.name' and 'selection.description':

<input ng-model="selection.name" type="text"/>
<textarea ng-model="selection.description"></textarea>

There is no need for the select() function anymore because there is already a two-way binding setup between the selected model and the input fields.