Splitting Html Components For One Controller Causes Controller To Stop Working

If I create two div's, both controlled by the same controller, Angular's controller seems to stop updating my view. I've put together a bare-bones example to demonstrate this. It

Solution 1:

A controller definition in angular is actually a Class / Constructor and not an Object. Each place in the HTML that controller is referenced, during the compilation phase, angular creates a new controller object using the defined controller class. So, you could refer to more than one scope with the same controller class.

You might have already heard of services in Angular and this is exactly a place where you need to use them to solve it. search that you are using is a common object that is being shared by two controller instances ( Note the class is the same MyCtrl but by putting in two ng-controller="MyCtrl" you asked Angular to create two instances of MyCtrl ). So these two objects have access to two different scopes and when they are created the two different scopes are set with two different search objects. When you click on reset, the other search objects reset gets called, which means nothing happens in the first MyCtrl's scope. This is the reason why your code doesnt work as expected.

Now note that in angular services are singletons. So if you reference them in multiple places you get access to the same object. So, resetting in a different controller (instance) will still reset the same object.

Here is a plunk that works with your code.

http://plnkr.co/edit/zynAdS9hg8DUZDnlnYFm?p=preview

Solution 2:

I have no idea how angularjs works but if you put 2nd input <input type="text" ng-model="search.query"></input> near to reset button, this input will be updated. Should inputs be inside the same div controller? Will it help you to solve your problem?

Solution 3:

Looking at your sample it seems that you are missing form tag for reset button. From angular perspective if you can use one outer div for controller="MyCtrl" where you have a form with two buttons-submit() and reset() and inside the outer div you put your nested controller "SomeOtherCtrl" then it should work perfectly.