AngularJS：如何在模型更改时更新视图？

Question

考虑这个HTML表格

 <form name="form" class="form-horizontal" novalidate>
     <div class="form-group">
         <label class="col-lg-2 control-label">Template</label>

             <div class="col-lg-4">
                 <label>
                     <select class="form-control"
                             data-ng-model="templateSelected"
                             data-ng-options="transactionTemplate.name for transactionTemplate in transactionTemplates">
                     </select>
                 </label>
             </div>
         </div>
         <div class="form-group">
             <label class="col-lg-2 control-label"
                    for="transactionName">Name</label>

             <div class="col-lg-4">
                 <input type="text" name="transactionName"
                        class="form-control"
                        id="transactionName"
                        placeholder="Transaction Name"
                        data-ng-model="transaction.name" required>
             </div>
         </div>
         <div class="form-group">
             <label class="col-lg-2 control-label">Type</label>

             <div class="btn-group col-lg-3" data-toggle="buttons"
                  data-ng-model="transaction.debit" required>
                 <label class="btn btn-default"
                        data-ng-click="setDebitTransaction('true')">
                      <input type="radio">
                      Debit
                 </label>
                 <label class="btn btn-default"
                        data-ng-click="setDebitTransaction('false')">
                     <input type="radio">
                     Credit
                 </label>
             </div>

         </div>
         <div class="form-group">
             <label class="col-lg-2 control-label">Date</label>

             <datepicker data-ng-model="transaction.date"></datepicker>
         </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Amount</label>

                    <div class="col-lg-4">
                        <div class="input-append">
                            <!-- to be added later -->
                            <!--button type="button" class="btn" ng-model="buttonSelect.currency" bs-button-select="['$', '₹']"></button-->
                            <!--suppress HtmlFormInputWithoutLabel -->
                            <input type="text" name="transactionAmount"
                                   class="form-control"
                                   data-ng-model="transaction.amount" required>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label">Category</label>

                    <div class="col-lg-4">
                        <label>
                            <select data-ng-model="transaction.category"
                                    class="form-control"
                                    data-ng-options="category.name group by category.parent for category in categories"
                                    required>
                            </select>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="controls button-group col-lg-4 col-lg-offset-2">
                        <button type="submit"
                                class="btn btn-danger"
                                data-ng-disabled="form.$invalid"
                                data-ng-click="saveTransaction()">
                            Submit
                        </button>
                        <button type="submit"
                                class="btn btn-link"
                                data-ng-click="resetTransactionForm()">
                            Cancel
                        </button>
           </div>
      </div>
</form>

我想在模型HTML发生变化时更新transaction元素 这是我的Controller

$scope.$watch('templateSelected', function () {
    if ($scope.templateSelected !== undefined) {
        console.log('selected transaction template:', $scope.templateSelected);
        $scope.transaction.name = $scope.templateSelected.name;
        $scope.transaction.debit = $scope.templateSelected.debit;
        $scope.transaction.category = $scope.templateSelected.category;
    }
}, true);

我所看到的是，当templateSelected具有有效值并且$watch被执行时，name表单上只有HTML值更新/可见，而不是

        $scope.transaction.debit = $scope.templateSelected.debit;
        $scope.transaction.category = $scope.templateSelected.category;

我在这里缺少什么？我还需要做些什么才能显示这些值？

已更新

创建Plunkr