javascript - Updating AngularJS models on ng-click, DOM not responding -

javascript - Updating AngularJS models on ng-click, DOM not responding -

i have input box , textarea held within modal window open upon button-click. same input box , textarea in utilize sec modal different purpose. each modal under different controller. when click on button first controller, want changes apply modal opposed when click on other controller's button.

however, since these controllers share these input , textarea fields, info 1 , other pass each other due ng-models within them. other times, if open modal window, type inputs, close it, , reopen same window, content still remains in input fields.

this because can't figure out how update content of these input/textarea fields within controllers. i'm not sure i'm doing wrong. models not updating dom--help?

controllera, new posts:

$scope.anonorname = "anonymous"; //value when user posts anonymously $scope.systemusername="name scheme here"; //value when user posts not-anon //new title defined user post. $scope.title=""; //post content user fills in $scope.postcontent = ""; /* * operates new post modal window, calling functions modalmanager *factory */ $scope.newideaclick = function() { $scope.title=""; //make sure title input blank, doesn't work $scope.postcontent=""; //make sure textbox blank, doesn't work document.getelementbyid('title').disabled = false; //allows user type new title, doesn't work document.getelementbyid('anonymous').disabled = true; //user must post anonymously modalmanager.open('newpost'); //open modal window };

controllerb, new comments:

$scope.anonorname = "anonymous"; $scope.systemusername="name scheme here"; //title of post user commenting on. user cannot alter this. $scope.title=""; // content of textarea, new comment written user. $scope.postcontent = ""; /* * operates new comment modal window, calling functions modalmanager mill */ $scope.newcommentclick = function() { $scope.title="(some title go here"; //sets title, cannot changed, doesn't work $scope.postcontent=""; //make sure textbox blank, doesn't work document.getelementbyid('anonymous').disabled = false; //user can select anon or not document.getelementbyid('title').disabled = true; //user may not take new title modalmanager.open('newcomment'); };

index.html has 2 calls of next code, 1 under controllera, other under controllerb:

<modal> <input ng-model="title" class="titleinputbox" id="title" /> <div class="commentpostname"> <div class="nameblank"> {{anonorname}} </div> <label> anonymous: <input type="checkbox" ng-model="anonorname" class="anoncheckbox" ng-true-value="anonymous" ng-false-value="{{systemusername}}" id="anonymous" /> </label> </div> <textarea id="postbodytextarea" ng-model="postcontent"> </textarea> </modal>

title , postcontent 2 models i'm trying set blank upon each time respective post or comment button clicked, calling click functions defined in each controller. won't update blanks in dom.

any help appreciated!

update: through debug statements i've been able determine values have been reset blank i've written code for, alter doesn't respect on dom. i've tried utilize $scope.$watch on these models same thing, no luck.

update: selected reply worked, had various other bugs in code kept right reply acting if had effect. it's working now! not above code.

the issue might caused scope inheritance. instead of doing $scope.title, $scope.postcontent should store string values within object property.

$scope.models = { title : "", postcontent: "" };

in markup

<input ng-model="models.title" class="titleinputbox" id="title" /> <textarea id="postbodytextarea" ng-model="models.postcontent">

the direct controller of modal not controller you've written, instead kid of controller. details on this, please read understanding scopes, benefit mutual task.

javascript html angularjs data-binding angularjs-model