Input text not being cleared out

Question

I'm trying to clear an input text after saving some data but it just doesn't work. This is what I've tried so far (what it's in comments too):

Thanks in advance for any help!

HTML:

<div id="add-tag">
    <h3>Add new tag</h3>
    <form name="addTagForm">
        <input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
        <button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>  
    </form>             
</div>

JS:

//$scope.master = {};

// Reset scope
$scope.reset = function() {
    $scope.newTag = "";
    //$scope.newTag = angular.copy($scope.master);
};


$scope.addTag = function(tag) {

    // Save some data (this works fine) 
    // ....

    // Reset input field
    $scope.reset();     
};

UPDATE:

My ng-controller was set to the parent template (I'm using ui.router). Just added it to the child template and it indeed worked.

<div id="add-tag" ng-controller="FormController">
    <h3>Add new tag</h3>
    <form name="addTagForm">
        <input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
        <button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>  
    </form>             
</div>

Could you give a working example of it.Since your code is resetting the text box. — Shivaraj, May 06 '14 at 12:06
This code must work fine. see if there is other code causing problem. — mayankcpdixit, May 06 '14 at 12:12

score 1 · Accepted Answer · answered May 06 '14 at 12:44

I am new in angularjs but after trying some thing i got some sort of solution for you. You can check this bin. I have just added a controller :-

function test_c($scope){

$scope.reset = function() {
$scope.newTag = "";
//$scope.newTag = angular.copy($scope.master);
};

$scope.addTag = function(tag) {

// Save some data (this works fine) 
// ....

// Reset input field
$scope.reset();     
};}

Look at the html part:-

<body ng-app>
  <div id="add-tag" ng-controller="test_c">
    <h3>Add new tag</h3>
    <form name="addTagForm">
    <input class="form-control" type="text" ng-model="newTag" ng-change="onChangeTag()">
    <button class="btn btn-primary" ng-click="addTag(newTag)">Add Tag</button>  
    </form>             
</div>

Thanks Bik! I was already using a Controller, but also ui.router using templates. The ng-controller was set to the parent template. Just added it to my template and it worked! — Teknotica, May 06 '14 at 13:23

Input text not being cleared out

1 Answers1

Linked