How to set scope variable empty in angularjs

Question

This is my code.

$scope.sendFeedback = function ()  {

    var mobile1 = $scope.mobile;
    var feedback1 = $scope.feedback;

    var userfeedback = {
        mobile: mobile1,
        feedback: feedback1
    };

    var feedbackRef = firebase.database().ref("feedback/");
    var newFeedbackRef = feedbackRef.push();
    newFeedbackRef.set(userfeedback, function(error) {
        if (error) {
            alert ('Error while registering feedback.');
        } else {
            $scope.feedback = '';
            alert ('Your feedback is registered.');

        }
    });
}

After calling this function i can see alert ('Your feedback is registered.'); but $scope.feedback = '' not setting that particulat textField as empty. I tried $scope.feedback = null; also, but no luck.

what is wrong here?

Edit: HTML View added.

<md-input-container class="md-block">
    <label>Feedback</label>
    <input required="" name="feedback" ng-model="feedback" >
    <div ng-messages="projectForm.feedback.$error" role="alert">
     <div ng-message-exp="['required']">
        This field is required.
    </div>          </div>

</md-input-container>

Possible duplicate of [AngularJS: When to pass $scope variable to function](http://stackoverflow.com/questions/18967127/angularjs-when-to-pass-scope-variable-to-function) — Spencer Wieczorek, Sep 15 '16 at 23:59

Flint · Answer 1 · 2016-09-16T00:20:43.537

I encountered that kind of problem several times, and solved it using the following workaround :

    angular.element(document.getElementById('doc'))
     .scope().$apply( function() {
            $scope.feedback=''
     )}

I made that very minimal working example, for the sake of testing the SO's snippet runner, and mostly using your own code. Hope this helps.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<script>
  var module=angular.module('test',[]).controller('test', function($scope) 
{
    $scope.click = function() {
            $scope.feedback = '';
            alert ('Your feedback is registered.');
    }
})
</script>
</head>
<body>

<div ng-app="test" ng-controller="test" id='feedback'>
<md-input-container class="md-block">
    <label>Feedback</label>
    <input required="" name="feedback" ng-model="feedback" >
    <div ng-messages="projectForm.feedback.$error" role="alert">
     <div ng-message-exp="['required']">
        This field is required.
    </div>          </div>

   <button ng-click='click();'>click?</button>
</md-input-container>
  </div>

score 1 · Answer 2 · edited May 03 '17 at 07:23

1

$scope.feedback = [];

(or)

setTimeout(function () {
    $scope.$apply(function () {
        $scope.feedback = [];
    });
}, 1000);

edited May 03 '17 at 07:23

cezar

11,616
6
48
84

answered May 03 '17 at 07:06

AngularJMK

1,178
13
15

score 0 · Answer 3 · answered Sep 16 '16 at 00:04

0

Do you have ng-app and ng-controller set? I tested your code on my machine, and it works as long as you have the app and controller set up. Can you make a JSFiddle?

answered Sep 16 '16 at 00:04

Darin Cardin

627
1
4
10

How to set scope variable empty in angularjs

3 Answers3