模型更改时未更新角度视图（DOM元素）

Question

Running latest stable version of Angular in latest stable Chrome. I have an ng-click on a DOM element that's inside a view with ng controller A, but the DOM element itself has an ng-controller set to another controller, B. ng-click fires inside controller B, however changes to scope properties, which DOM element is bound to by its ng-model attribute, are not reflected.

Specifically I have a textarea, as well as other HTML5 input types. No errors, and when I break in the debugger, I can look at the scope variable and see that $scope is in fact pointing to controller B.

Plnkr example here, notice how it only updates the input that's inside the same DIV?: http://plnkr.co/edit/DmccNj?p=preview

Answer 1

I had the same issue just recently. Apparently, when you create two HTML fragments with the same ng-controller , it creates two separate instances of the controller. So, hitting the 'EDIT' button sets $scope.comment in instance 1, but the input field is bound to instance 2 of the controller.

If you must do it this way, you're best of creating an angular service, as they are singletons.

Here is my question: Splitting HTML components for one controller causes controller to stop working

Also, Angular Batarang is a very cool Chrome extension from the AngularJS team to debug Angular applications. I mention this because if you (or I) had used this, we would have instantly seen what was going wrong.