When I create two divs controlled by the same controller in Angular, I notice that the controller stops updating my view.
To illustrate this issue, I have prepared a simple example. You can view the sample here on JSFiddle, or you can also refer to the code below.
HTML
<div ng-app='App'>
<div ng-controller="MyCtrl">
<form>
<input type="text" ng-model="search.query"></input>
<button ng-click="search.submit()">Submit</button>
</form>
</div>
<div ng-controller="SomeOtherCtrl">
{{sampleText}}
</div>
<div ng-controller="MyCtrl">
<button ng-click="search.reset()">Reset Form</button>
</div>
</div>
JS
var app = angular.module('App',[]);
function MyCtrl($scope)
{
$scope.search = {
query : 'foobar',
submit : function() {
this.query = 'Submitted';
console.log(this.query);
},
reset : function() {
console.log('resetting');
this.query = '';
}
};
}
function SomeOtherCtrl($scope) {
$scope.sampleText = 'other controller text';
}
Upon clicking the submit button, everything works as expected. However, when clicking on the Reset button, although I see resetting being logged in the console, the view (the form input) does not update.
I am facing this issue in a current project where certain HTML elements belong to another controller. How can I address this challenge?