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

考虑一下这个

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>

我所看到的是，当

templateSelected

具有有效值并且执行

$watch

时，只有

name

值在

HTML

表单上更新/可见，而不是

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

我错过了什么？我需要做什么来显示这些值呢

已更新

---

创建了

你能制作一个弹片吗？嗨，我已经创建了一个弹片。你的弹片没有定义角度脚本。包括它并修复即将到来的摘要错误我很糟糕，我更新了plnkr@daydreamer：但您没有更新指向它的链接？它不起作用！

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