Why are my inputs not resetting?

Question

The below code generates several forms depending on data returned from the server. Everything generates fine, but after clicking on an AnswerOpenQuestion button the input does not clear/reset. What's going on here?

angularJs code:

var availableInterviewController = function($scope, $http) {

// define initial model
$scope.interviews = [];

// retrieve available interviews
$http.get('/api/UserInterviewsApi/AvailableInterviews')
    .success(function(data) {

        // update interviews
        $scope.interviews = [];
        $scope.interviews = data;
    });

// define open question answer selection
$scope.Answer = "";

// define multiple choice selection
$scope.selectedChoice = "";

// define answer open question button
$scope.AnswerOpenQuestion = function() {
    $scope.Answer = ans;
    alert(q.Question + ' and ' + $scope.Answer);
    $scope.Answer = ''; // <---This is not clearing/resetting the HTML form inputs
};

// define answer multiple choice button
$scope.AnswerMultipleChoice = function() {
    // 
};
};

 // assign the new controller to the main angular app
 myAngApp.controller('availableInterviewCtrl', availableInterviewController);

Html code:

        <form class="form-group" ng-repeat="q in inter.Questions">
        <fieldset style="display: inline-block;">
            <legend>Question {{$index + 1}}</legend>

            <!--Open Ended-->
            <div class="form-group" ng-show="q.MultipleChoices.length === 0">
                <label for="{{'quest-' + $index}}">

                    <strong class="text-info">{{q.Question}}</strong><br />

                </label>
                <input name="openQuestion" id="{{'quest-' + $index}}" type="text"
                       class="form-control" ng-model="Answer" />

                <button ng-click="AnswerOpenQuestion()">Answer</button><br />
                <span class="text-info">
                    asked by {{q.AskedByUserName ==
                    'Administrator' ? 'staff' : q.AskedByUserName}}
                </span>
            </div>


            <!--Multiple Choice Question-->
            <div class="form-group" ng-show="q.MultipleChoices.length > 0">
                <label for="{{'quest-' + $index}}">
                    <strong class="text-info">{{q.Question}}</strong>

                </label>

                <div>
                    Select an answer:
                    <label ng-repeat="x in q.MultipleChoices">
                        <input name="currentChoice" type="radio" value="{{x.Id}}"
                               ng-model="selectedChoice" />
                        {{x.Choice}}
                    </label>

                    <button ng-click="AnswerMultipleChoice()">Answer</button><br />
                    <span class="text-info">
                        asked by {{q.AskedByUserName ==
                        'Administrator' ? 'staff' : q.AskedByUserName}}
                    </span>
                </div>

            </div>
        </fieldset>
    </form>

UPDATE - Solution

AngularJs:

// define open question answer selection
$scope.OpenAnswer = { Answer: '' };

// define answer open question button
$scope.AnswerOpenQuestion = function (q, ans) {
    $scope.OpenAnswer.Answer = ans;

    alert(q.Question + ' and ' + $scope.OpenAnswer.Answer);

    // clear the input
    $scope.OpenAnswer.Answer = '';
};

Html:

<input id="{{'quest-' + $index}}" type="text"
                       class="form-control" ng-model="OpenAnswer.Answer" />

Answer 1

Don't use the scope as a model instead make an object that wraps the data model and assign it to a property of the scope.

$scope.myModel = {Answer:''}

Also don't use value in most cases ngmodel is all you need for two way binding.

In js strings are immutable so the original reference is not being updated instead a new string is being made, the digest cycle won't see this as a change to the original string.