Not able to clear input field using angular.js

Question

I need to keep blank all input field after submit data in DB using AngularJS . I am explaining my code below.

course.html

<div id="SHOWDATA">
    <div id="transactionsPortlet" class="panel-collapse collapse in">
        <div class="portlet-body">
            <div class="totalaligndiv">
                <div class="col-md-6">
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Course Name :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="coursename" >
                            <option value="">Select Course</option>
                            <option value="Bachelor of Technology">Bachelor of Technology </option>
                            <option value="Master of Technology">Master of Technology</option>
                            <option value="Master of Computer Application">Master of Computer Application</option>
                        </select>
                    </div
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Short name :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="course_short_name" >
                            <option value="">Select Short name</option>
                            <option value="B-TECH">B-TECH</option>
                            <option value="MTECH">MTECH</option>
                            <option value="MCA">MCA</option>
                        </select>
                    </div>  
                </div>
                <div class="col-md-6">
                    <div class="input-group bmargindiv1 col-md-12">
                        <span class="input-group-addon ndrftextwidth text-right" style="width:180px">Semester :</span>
                        <select id="coy" name="coy" class="form-control" ng-model="semester" >
                            <option value="">Select Semester</option>
                            <option value="IV">IV</option>
                            <option value="VI">VI</option>
                            <option value="VIII">VIII</option>      
                        </select>
                    </div>
                </div>
                <div class="clearfix"></div>    
                <div style="text-align:center; padding-top:10px;">
                    <button class="btn btn-success" type="button" ng-click="addCourseData();">Submit</button>
                </div>
                <div class="clearfix"></div>           
            </div>
        </div>
    </div>
</div>  

The above file all fields are declared.Here my requirement is when user finished submit data all field will be cleared.The respective controller code is given below.

courseController.js

var courseApp = angular.module('GofastoHome');
courseApp.controller('coursecontroller', function ($scope) {
    $scope.addCourseData = function () {
        var userdata = {'course_name': $scope.coursename, 'course_short_name': $scope.course_short_name, 'semester': $scope.semester};
        console.log('userdata', userdata);
        $.ajax({
            type: 'POST',
            url: "php/addCourse.php",
            data: userdata,
            success: function (response) {
                alert(response);
                $scope.coursename = '';
                $scope.course_short_name = '';
                $scope.semester = '';
            },
            error: function (result) {
                alert(result)
            }
        })
    }
});

Please help me to resolve this issue.

Answer 1

Try this way from @Satpal comment with some changes

Instead of $.ajax use $http like $http.post(url, data).success(fn)

You just use then() instead of success() , also should define $http on globally

var courseApp=angular.module('GofastoHome');
courseApp.controller('coursecontroller',function($scope,$http){
    $scope.addCourseData= function(){        
             var userdata='course_name':$scope.coursename,
            'course_short_name':$scope.course_short_name,'semester':$scope.semester};
             console.log('userdata',userdata);
             $http.post("php/addCourse.php",userdata).then(function(response){
                alert(response);
                $scope.coursename='';
                $scope.course_short_name='';
                $scope.semester='';

    });
   };
});

Answer 2

Yes, i agree with @Satpal

Instead of $.ajax use $http like $http.post(url, data).success(fn)

and if you have to have $.ajax/get/post then use it with angular's .factory or .service like;

var courseApp=angular.module('GofastoHome');

courseApp.factory('Course', [
    '$q',
    function($q) {

        return {
            addCourse    : function(userdata) {
                var q = $q.defer();

                $.ajax({
                   type:'POST',
                   url:"php/addCourse.php",
                   data:userdata,
                   success: function(response){
                       alert(response);
                       q.resolve(response);
                 },
                error: function(result){
                    q.reject(result);
                 }
            })

            return q.promise;
      }
    }]);



courseApp.controller('coursecontroller',function($scope, Course){
    $scope.addCourseData=function(){
        var userdata={'course_name':$scope.coursename,'course_short_name':$scope.course_short_name,'semester':$scope.semester};
        console.log('userdata',userdata);
        Course.addCourse(userdata).then(function(response) {
            $scope.coursename='';
            $scope.course_short_name='';
            $scope.semester='';
        }, function(err) {
            alert(err)
        });
    }
});

Answer 3

You need to apply changes made outside of angularjs context. Add $scope.$apply(); as last statement in success function it should work.