AngularJS form Cannot read property '$setPristine' of undefined

Problem

I know there is other similar questions to this, but i've read them all and none of them is working for me.

When i try to set my form to a pristine, I keep getting this error:
TypeError: Cannot read property '$setPristine' of undefined

The controller and my angular version (1.4.2) are everything ok, because i also have other thing happening within the same function calling the $setPristine(); method and that one is working.

This is the code i'm using:

html

<form name="cadTel" novalidate>
    <div class="form_group">
        <label class="col-md-4 f--label"><i class="fa fa-asterisk"></i>Nome</label>
        <div class="col-md-8 f--input">
            <input type="text" name="ds_contato" ng-model="tel.ds_contato" ng-required="true" />
        </div>
    </div>
    <div class="form_group">
        <label class="col-md-4 f--label"><i class="fa fa-asterisk"></i>Telefone</label>
        <div class="col-md-8 f--input">
            <input type="text" name="num_tel" mask="(99) 9?9999-9999" ng-model="tel.num_tel" ng-required="true" />
        </div>
    </div>
    <input type="button" class="bt-m bt-suc" name="cadastrar" value="Salvar" ng-click="add_telefone(tel)">
    <div class="bt-m bt-war" ng-click="reset()">Limpar</div>
</form>

app.js

$scope.tel = {};

$scope.add_telefone = function(tel) {
    $scope.tel = angular.copy(tel);
    $http({
        method: 'POST',
        url:'dist/php/db.php?action=add_telefone', 
        data:$scope.tel,
    })
    .success(function (data, status, headers, config) {
        $scope.reset();
    })
    .error(function (data, status, headers, config) {
    });
};
$scope.reset = function() {
    $scope.tel = {};
    $scope.cadTel.$setPristine();
};

The option to clean the values are working but to set pristine none.
Any ideas?

Problem courtesy of: celsomtrindade

Solution

I faced the same issue and below fix corrected it. Angular is not aware of the form id. Please change the form name as below

form name="form.cadTel"

Also during the controller startup set the form

$scope.form = {};

Check this plnkr link.

Solution courtesy of: Manoj Badam

Discussion

I am using bootstrap modal to show the forms and when I click Cancel or click outside of modal I wanted to reset the form. I spent hours troubleshooting AngularJS form Cannot read property '$setPristine' of undefined error and solved it by adding a simple condition before reseting the form:

$('#myform-modal').on('hidden.bs.modal', function () {
  resetModal();
});
resetModal = function() {
    if ( $scope.MyForm ) {
      $scope.MyForm.$setPristine();
      $scope.MyForm.$setUntouched();
      $scope.MyForm.$submitted = false;
      delete $scope.data;
    }
}

Discussion courtesy of: minnur

This recipe can be found in it's original form on Stack Over Flow.